Animated CSS3 Buttons For Blogger

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

Animated professional CSS3 buttons make your blogger article awesome. This article helps you to put CSS3 animated buttons in your blog post as i am using as you can see. these buttons have black, pink, green, magenta, red, orange and yellow. There are also big, medium and small buttons too. I have complete guideline on how to use this colorful buttons

VIEW DEMO

CSS3 Buttons In Blogger

Design Tab → Edit HTML

Now find the following code

<head>

And paste the below CSS code just after <head>

<link type="text/css" href="https://rafiblog.googlecode.com/svn/branches/colorcssdemo.css" rel="stylesheet" />

Now save the template

How To Use Buttons In Post

Paste the following HTML codes in your Blogger

For Large Buttons

<a href="LINK" class="large awesome">LINK NAME</a>
<a href="LINK" class="large blue awesome">LINK NAME</a>
<a href="LINK" class="large pink awesome">LINK NAME</a>
<a href="LINK" class="large magenta awesome">LINK NAME</a>
<a href="LINK" class="large green awesome">LINK NAME</a>
<a href="LINK" class="large red awesome">LINK NAME</a>
<a href="LINK" class="large orange awesome">LINK NAME</a>
<a href="LINK" class="large yellow awesome">LINK NAME</a>

For Medium Buttons

<a href="LINK" class="medium awesome">LINK NAME</a>
<a href="LINK" class="medium blue awesome">LINK NAME</a>
<a href="LINK" class="medium pink awesome">LINK NAME</a>
<a href="LINK" class="medium magenta awesome">LINK NAME</a>
<a href="LINK" class="medium green awesome">LINK NAME</a>
<a href="LINK" class="medium red awesome">LINK NAME</a>
<a href="LINK" class="medium orange awesome">LINK NAME</a>
<a href="LINK" class="medium yellow awesome">LINK NAME</a>

For Small Buttons

<a href="LINK" class="small awesome">LINK NAME</a>
<a href="LINK" class="small blue awesome">LINK NAME</a>
<a href="LINK" class="small pink awesome">LINK NAME</a>
<a href="LINK" class="small magenta awesome">LINK NAME</a>
<a href="LINK" class="small green awesome">LINK NAME</a>
<a href="LINK" class="small red awesome">LINK NAME</a>
<a href="LINK" class="small orange awesome">LINK NAME</a>
<a href="LINK" class="small yellow awesome">LINK NAME</a>

Change LINK and LINK NAMEwith your desire link and link text respectively

Ask any question in comment and Thank you. If you feel the article is great you can share