Use this site to create clean and intuitive HTML5 and CSS3 buttons that will work on any modern browser.
Click here for more details about clean design.
CSS3 and HTML5 clean button code shown below. Completely free. No attribution required. No email or signup required. Copy the link to your unique set of buttons to come back and edit or share with others. Enjoy!
You can have all buttons the same size if you want, but this just gives you the option to use 3 different sizes.
Corner Rounding (0 for rectangular buttons)
Border Thickness (0 for no border)
Vertical Padding (Space inside button above and below the button text)
Horizontal Padding (Space inside button left and right of the button text)
Font Size (Height of the Font in pixels)
| Small: | Medium: | Large: |
Font Weight (400 is normal, 700 is bold. Varies by Font)
| Small: | Medium: | Large: |
Primary Buttons move things forward. The button you want users to click. Like Start, Save, Buy, Add to Cart, Download, etc. The color of this button should draw the eye and reward clicking.
Normal
| Font Color: | ||
| Highlight Color: | ||
| Background Color Top: | ||
| Background Color Bottom: | ||
| Border Color: |
Active
| Font Color: | ||
| Highlight Color: | ||
| Background Color Top: | ||
| Background Color Bottom: | ||
| Border Color: |
Disabled
| Font Color: | ||
| Highlight Color: | Background Color Top: | |
| Background Color Bottom: | ||
| Border Color: |
Secondary Buttons either cancel the current action or are added extras. Like a cancel button or settings button. The color of the Secondary button should not stand out too much and be less bright and attractive than the Primary button. Medium contrast grays are useful here.
Normal
| Font Color: | ||
| Highlight Color: | ||
| Background Color Top: | ||
| Background Color Bottom: | ||
| Border Color: |
Active
| Font Color: | ||
| Highlight Color: | ||
| Background Color Top: | ||
| Background Color Bottom: | ||
| Border Color: |
Disabled
| Font Color: | ||
| Highlight Color: | ||
| Background Color Top: | ||
| Background Color Bottom: | ||
| Border Color: |
Danger Buttons do dangerous things. Like Delete. This button is rare, but because it is dangerous it should warn the user by standing out, and is preferably red (if your site color or Secondary buttons are red, than an orange or yellow may work better).
Normal
| Font Color: | ||
| Highlight Color: | ||
| Background Color Top: | ||
| Background Color Bottom: | ||
| Border Color: |
Active
| Font Color: | ||
| Highlight Color: | ||
| Background Color Top: | ||
| Background Color Bottom: | ||
| Border Color: |
Disabled
| Font Color: | ||
| Highlight Color: | ||
| Background Color Top: | ||
| Background Color Bottom: | ||
| Border Color: |
Use the link above or copy the settings below to save your settings or share them
Copy Link:
Copy Settings:
Click below to select, then copy
<style>
[class*="cleanButtons"] {
}
[class*="cleanButtons"]:link, [class*="cleanButtons"]:visited {
text-decoration: none;
}
[class*="cleanButtonsPrimaryNormal"] {
}
[class*="cleanButtonsPrimaryActive"], [class*="cleanButtonsPrimaryActive"]:hover, [class*="cleanButtonsPrimaryActive"]:active, [class*="cleanButtonsPrimaryActive"]:focus, [class*="cleanButtonsPrimaryNormal"]:hover, [class*="cleanButtonsPrimaryNormal"]:active, [class*="cleanButtonsPrimaryNormal"]:focus {
}
[class*="cleanButtonsPrimaryDisabled"] {
}
[class*="cleanButtonsSecondaryNormal"] {
}
[class*="cleanButtonsSecondaryActive"], [class*="cleanButtonsSecondaryNormal"]:hover, [class*="cleanButtonsSecondaryNormal"]:active, [class*="cleanButtonsSecondaryNormal"]:focus {
}
[class*="cleanButtonsSecondaryDisabled"] {
}
[class*="cleanButtonsDangerNormal"] {
}
[class*="cleanButtonsDangerActive"], [class*="cleanButtonsDangerNormal"]:hover, [class*="cleanButtonsDangerNormal"]:active, [class*="cleanButtonsDangerNormal"]:focus {
}
[class*="cleanButtonsDangerDisabled"] {
}
[class*="cleanButtonsSmall"] {
}
[class*="cleanButtonsMedium"] {
}
[class*="cleanButtonsLarge"] {
}
</style>
<h1>Clean Buttons Example</h1>
<p>To set a button, add the class for the type and the size. There are two ways to do this - either class="cleanButtonsPrimaryNormal-cleanButtonsLarge" which allows a single CSS class, or you can use two classes with a space between like class="cleanButtonsPrimaryNormal cleanButtonsLarge". Either will work. Use whichever works best with any scripts that change the class.</p>
<p> </p>
<p><button class="cleanButtonsPrimaryNormal-cleanButtonsLarge">Primary Normal Large</button></p>
<p> </p>
<p><button class="cleanButtonsSecondaryDisabled-cleanButtonsMedium">Secondary Disabled Small</button></p>
<p> </p>
<p><button class="cleanButtonsDangerActive-cleanButtonsSmall">Danger Active Small</button></p>
The above code can be inserted into a HTML page just like that, or you can separate the CSS into a separate file or into a header or menu page. Use at your own risk. No warranty or support is offered. See terms for more.
To set a button, add the class for the type and the size. There are two ways to do this - either class="cleanButtonsPrimaryNormal-cleanButtonsLarge" which allows a single CSS class, or you can use two classes with a space between like class="cleanButtonsPrimaryNormal cleanButtonsLarge". Either will work. Use whichever works best with any scripts that change the class.
The code is written simply, so you can easily edit it, and adjust things to suit your site.
Rounding is Friendly. Rounded buttons have a more friendly look and feel.
Contrasting Text and Background. Ensure the text is easy to read - except for the disabled versions of buttons which should be muted to make it clear they are not an option at that time.
These examples will load new settings and replace the settings above. Feel free to use or modify these to your taste.
Purple Square No Highlight Buttons
Please add a comment to my article on findthingy.com: https://findthingy.com/clean-intuitive-html5-css3-buttons
Enjoy!