Friday, August 10, 2012

Animated Professional CSS3 Button



                                       

Attractive Blogger CSS3 Buttons to make your Blog more and more attractive. This post will show you a tutorial how to show this awesome button in your blog.
Given there are different colors of button as well as Different size of buttons.


How to Add this Button

  • Login to your blogger Account
  • Go to template and edit HTML
  • Now search for <Head> (shortcut use - ctrl + f)
  • Paste the following CSS Code just after <Head>



<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<blockquote class="tr_bq" style="background-color: #2cea8e; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border: 1px solid rgb(221, 221, 221); color: #2c7bea; font-family: 'comic sans ms', 'Arial', Arial, serif; font-size: 0.9em; font-weight: bold; margin: 0px 20px; padding: 20px 70px 20px 20px;">
<br /></blockquote>
<br class="Apple-interchange-newline" /></div>



  • Now save the Template.

How to use buttons 

  • Paste the following codes of different color and size.

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>



Replace Link and Link Name
Read More

© 2012 Unicornix, AllRightsReserved.

Designed by Unicornix