Awesome CSS3 Buttons For Blogger

When you are designing nice blogger gadget to your blog. Like adding some buttons to your blog for any command, you need a nice button style for your blogger. Because it will helps to attract your blog.So,in this post im providing some classic style buttons with icons It include9 buttons.Earlier post about buttons So you can add your buttons Follow this steps
to add it to your blog.

DEMO

1. Log in to blogger  Design > Page Element.

2. Find this tag by using Ctrl+F   ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

.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";
} 

4. Now HTML Code here

   If you want to add one button, add just one link for your blog.

<a class="button add"   href="#">Add</a>
<a class="button delete"href="#">Delete</a>
<a class="button edit"  href="#">Edit</a>
<a class="button save"  href="#">Save</a>
<a class="button email" href="#">Email</a>
<a class="button like"  href="#">like</a>
<a class="button next"  href="#">Next</a>
<a class="button spark" href="#">spark</a>
<a class="button play"  href="#">play</a>

Replace # with your link and names.

7. Now save your HTML/Javascript'.

    You are done...