Nov 19, 2012

11/19/2012

Add Professional Animated CSS Buttons For Blogger

Unknown  , ,  3 comments


How to Add Professional Animated CSS Buttons to Blogger Blog ?
In this Tutorial i will tell you how to add Animated water,bubble effect button to blogger .you can use button for multipurpose like .Download button ,Demo buttons etc
To add this button style use below steps ..
  •  Log in to blogger account and go t dashboard
  • Now select "Template"
  • Now you can see Live on blog, Click EDIT HTML Button"
  • Now click Proceed button.   
  • Find this tag  ]]></b:skin>  by using Ctrl+F
  • Paste below code Before ]]></b:skin> tag
.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiP8kM04SEeyHBZnbOsblkzlVCR8y6bWDr5_UZEC5_Wj532SuSSjWwu2Dnzv6Ivs_CBV06woj_YbQ7b8bGwoWnFBJNBuu93-69x7663mRHLN3GTUafnWjQPW6f0MlOFRyOmKsBJATnMSL/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

Now Save the Template ...and  when ever you need to use this button then use the below Code as Html

<a class="button big blue" href="Your Link" target="_blank">Live Demo</a>

<a class="button big orange" href="Your Link" target="_blank">Live Demo</a>

<a class="button big green" href="Your Link" target="_blank">Live Demo</a>

<a class="button big gray" href="Your Link" target="_blank">Live Demo</a>

<a href="LINK HERE" class="button blue medium">TEXT HERE</a>
<a href="LINK HERE" class="button green medium">TEXT HERE</a>
<a href="LINK HERE" class="button orange medium">TEXT HERE</a>
<a href="LINK HERE" class="button gray medium">TEXT HERE</a>

<a href="LINK HERE" class="button small blue">TEXT HERE</a>
<a href="LINK HERE" class="button small green">TEXT HERE</a>
<a href="LINK HERE" class="button small orange">TEXT HERE</a>
<a href="LINK HERE" class="button small gray">TEXT HERE</a>

<a href="LINK HERE" class="button small blue rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small green rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small orange rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small gray rounded">TEXT HERE</a>

Comment if it works for you or if any Problem..

Related Posts

Subscribe Updates, Its FREE!

COMMENT!

3 comments:

  1. UnknownFebruary 13, 2013 at 9:50 PM

    @Abhijit Guhatell me in detail with your blog url

    ReplyDelete
  2. Vikas ChoudharyJuly 14, 2013 at 1:55 PM

    hahahahaaaa same name bro, I'm also Vikas Choudhary from Haryana.....



    bro could you tell me about medium buttons, as they are too big.....

    ReplyDelete
    Replies
    1. UnknownJuly 15, 2013 at 2:51 AM

      :) yaa that great ...

      I have Update the post and buttons codes for you to many shape and size ,,enjoy ..

      Delete

Subscribe to: Post Comments (Atom)

 

Copyright @ 2013 EgyTricks.

Designed by Vikash | EgyTricks