Clean Buttons

 

 

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!

 

 

Clean Buttons have 3 distinct types

 

Each button type (Primary, Secondary, Danger) has 3 states

 

 

Buttons can have 3 sizes (optional)

You can have all buttons the same size if you want, but this just gives you the option to use 3 different sizes.

 

 

Create Your Button Design

 

 

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)

 

 

Button Sizes

 

 

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 Button Colors

 

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 Colors

 

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 Button Colors

 

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:

Apply Settings:

 

Go back to default settings

 

 

 

HTML5 Code (with on page CSS3)

 

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>&nbsp;</p>
<p><button class="cleanButtonsPrimaryNormal-cleanButtonsLarge">Primary Normal Large</button></p>
<p>&nbsp;</p>
<p><button class="cleanButtonsSecondaryDisabled-cleanButtonsMedium">Secondary Disabled Small</button></p>
<p>&nbsp;</p>
<p><button class="cleanButtonsDangerActive-cleanButtonsSmall">Danger Active Small</button></p>

 

Using the code

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.

 

Button Suggestions

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.

 

Examples

These examples will load new settings and replace the settings above. Feel free to use or modify these to your taste.

Smoother Blue Default Buttons

Purple Square No Highlight Buttons

Round Green One Color

 

Comments? Bugs? Feedback? Suggestions?

Please add a comment to my article on findthingy.com: https://findthingy.com/clean-intuitive-html5-css3-buttons

Enjoy!