Search Knowledge Base

Home » Blogger Widgets » Animated Download and Live Demo Buttons For Blogger

Animated Download and Live Demo Buttons For Blogger

Posted by Hammad Ansari
Share this
Today right here I provide you Css Buttons which bloggers often need in there blogs to redirect to demo or download web page. These buttons make the simple links more pleasing. This is very important for those blogs who shared templates, themes etc.


    These button use CSS3 so old browsers like IE would not support it. These buttons work on almost all major browsers. Before starting do not forget to make a backup of your template. So here is the tutorial for adding these buttons to your blogger blog.

    First of all we have to add CSS. Copy the below CSS code and paste it just above  ]]></b:skin> 
.button {display: inline-block;position: relative;padding: 10px 20px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;text-decoration: none!important;text-shadow: 1px 1px 0 rgba(255,255,255,0.4);font: 15px Calibri,Arial,sans-serif;white-space: nowrap;vertical-align: baseline;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png');background-position: bottom left;background-position: bottom left,top right,0 0,0 0;background-repeat: no-repeat;background-clip: border-box;-webkit-box-shadow: 0 0 1px #fff inset;-moz-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;cursor: pointer;}
.button:hover {background-position: top left;background-position: top left,bottom right,0 0,0 0;}
.button:active {bottom: -1px;}
.button.big {font-size: 30px;}
.button.medium {font-size: 18px;}
.button.small {font-size: 13px;}
.blue.button {border: 1px solid #84acc3!important;color: #0f4b6d!important;background-color: #48b5f2;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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 {border: 1px solid #96a37b!important;color: #345903!important;background-color: #79be1e;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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 {border: 1px solid #bea280!important;color: #693e0a!important;background-color: #e38d27;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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));}
.gray.button {border: 1px solid #a5a5a5!important;color: #525252!important;background-color: #a9adb1;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Y68DKUTpHnVUdBzQKdvV7noc2gFwrtwxmv7NSFT8jpNWnZ4uNajRtwGJblEBhdQFmNn_L9iotzsGHXop3eDkeJMry5YLpA55aY2_-8EEWq9J8K67v_G_i_YCICdykVDJjWpIgLvz20nV/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));}

 After adding this code Save your template.

 Then add the below HTML where you want these buttons to appear. I have arranged these buttons according to there sizes. You just have to add them in the post or the template wherever you want.


HTML FOR LARGE SIZED BUTTONS 


<a class="button big blue" href="LINK">LINKNAME</a>
<a class="button big green" href="LINK">LINKNAME</a>
<a class="button big orange" href="LINK">LINKNAME</a>
<a class="button big gray" href="LINK">LINKNAME</a>


HTML FOR MEDIUM SIZED BUTTONS 



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


HTML FOR SMALL SIZED BUTTONS 



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

Replace LINK with your desired link and LINK with the text you want to be written on the button.

 Thats it. Its not too hard to set up. If you want any kind of assistance or help for installing these buttons on your blog then just drop a comment below till then Peace, Blessings and Happy Animating.

2 comments :

Subscribe to: Post Comments ( Atom )

Contact Us

Name

Email *

Message *

Follow us