Add CSS3 Buttons With Icons In Blog Posts ~ The Next Generation Blog

Home » blogger_tricks » Add CSS3 Buttons With Icons In Blog Posts

Add CSS3 Buttons With Icons In Blog Posts

Hi friends, In my previous post, I told you how to add Keyboard Buttons in blogger posts. Now, I am going to tell you how to add CSS3 buttons in your blog posts. These buttons really look cool in the blog posts. So, let's start the tutorial:
> Go to blogger and login to your blogger account.
> Then, go to Layout > Edit HTML > Proceed > Expand Widget Templates.
> Now press ctrl+F and search for the code ]]></b:skin> in your blog code.
> Now, copy and paste the code given below just above the ]]></b:skin>.

/* Awesome CSS3 Buttons with Icons By THE NEXT GENERATION www.ashutoshthehacker.blogspot.com */
.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";
}
/* Awesome CSS3 Buttons with Icons THE NEXT GENERATION www.ashutoshthehacker.blogspot.com */

> Now, save your template.

Now, whenever you want to add the buttons in your blog posts, just edit your post in html mode and then add the codes given below to add the buttons:

<a class="button add" href="Your URL Here!">Add</a>
<a class="button edit" href="Your URL Here!">Edit</a>
<a class="button delete" href="Your URL Here!">Delete</a>
<a class="button save" href="Your URL Here!">Save</a>
<a class="button email" href="Your URL Here!">Email</a>
<a class="button like" href="Your URL Here!">like</a>
<a class="button next" href="Your URL Here!">Next</a>
<a class="button star" href="Your URL Here!">Star</a>
<a class="button spark" href="Your URL Here!">spark</a>
<a class="button play" href="Your URL Here!">play</a>

NOTE: Replace Your URL Here with your own link/url.
CLICK HERE TO SEE DEMOKeep visiting for more tips and tricks. Share this post and subscribe to my latest updates.