Just Some Awesome CSS3 Buttons

While last time we’ve created simple CSS3 gradient buttons, this time we’ll build some nice CSS3 buttons with icons.
In order to create the icons, this set of CSS3 buttons uses HTML entities. Also, gradients, shadows and many other CSS3 features do not miss.

DEMO

Minimal markup

 href="" class="button">Button

Simple button, with no icon.

 href="" class="button add">Add

Note the add class who adds the plus icon.

CSS

Below you can find the styles used to create the buttons and icons:

.button
{        
 display: inline-block;
 white-space: nowrap;
 background-color: #ccc;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
 background-image: -webkit-linear-gradient(top, #eee, #ccc);
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -ms-linear-gradient(top, #eee, #ccc);
 background-image: -o-linear-gradient(top, #eee, #ccc);
 background-image: linear-gradient(top, #eee, #ccc);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
 border: 1px solid #777;
 padding: 0 1.5em;
 margin: 0.5em;
 font: bold 1em/2em Arial, Helvetica;
 text-decoration: none;
 color: #333;
 text-shadow: 0 1px 0 rgba(255,255,255,.8);
 -moz-border-radius: .2em;
 -webkit-border-radius: .2em;
 border-radius: .2em;
 -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
 -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
 box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.button:hover
{
 background-color: #ddd;        
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
 background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
 background-image: -moz-linear-gradient(top, #fafafa, #ddd);
 background-image: -ms-linear-gradient(top, #fafafa, #ddd);
 background-image: -o-linear-gradient(top, #fafafa, #ddd);
 background-image: linear-gradient(top, #fafafa, #ddd);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');        
}

.button:active
{
 -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
 -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
 box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
 position: relative;
 top: 1px;
}

.button:focus
{
 outline: 0;
 background: #fafafa;
}    

.button:before
{
 background: #ccc;
 background: rgba(0,0,0,.1);
 float: left;        
 width: 1em;
 text-align: center;
 font-size: 1.5em;
 margin: 0 1em 0 -1em;
 padding: 0 .2em;
 -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
 -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
 box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
 -moz-border-radius: .15em 0 0 .15em;
 -webkit-border-radius: .15em 0 0 .15em;
 border-radius: .15em 0 0 .15em;
        pointer-events: none;        
}

/* Hexadecimal entities for the icons */

.add:before
{
 content: "\271A";
}

.edit:before
{
 content: "\270E";        
}

.delete:before
{
 content: "\2718";        
}

.save:before
{
 content: "\2714";        
}

.email:before
{
 content: "\2709";        
}

.like:before
{
 content: "\2764";        
}

.next:before
{
 content: "\279C";
}

.star:before
{
 content: "\2605";
}

.spark:before
{
 content: "\2737";
}

.play:before
{
 content: "\25B6";
} 

Scalability

You just need to change the font-size value from the following shorthand declaration:
font: bold 1em/2em Arial, Helvetica;There you go, you’ve just increased/decreased the button’s size!

Rendering & browsers support

The icons are added using the :before pseudo-element. Therefore, you won’t see any icons in browsers like IE7 and below, but the buttons will look good yet.
Different operating systems and different browsers means different rendering for the HTML entities we used as icons. If you want to use another icons instead, you could try something like Pictos.