Beautiful CSS3 Animated Buttons for Blogger

Guys Today i will be giving out the code with which you can Insert cool animated buttons on you blogger blog. These buttons will make your simple links more attractive as these are animated.

These buttons use CSS3 so will not work on old browser like IE. But worry not these buttons work on all major browsers.

DEMO

Animated CSS3

Buttons Beautiful

LINKNAME LINKNAME

LINKNAME LINKNAME

LINKNAME LINKNAME

LINKNAME LINKNAME

Just follow the steps given and also you can have these beautiful animated buttons on your blog as well.

First of all go to Template >>> Edit HTML >>> and search for ]]></b:skin> 

Then paste the below code just before the ]]></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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIWkGc89oaDBNpNPyAK_E0n3cJzNj25qMkOzVPuEep8-8w1u8AzaAYYaGMnHJUZXuREEQi6b4mTkmlrHrjiGCikpQIgNpdh90pNFfNrG20987QXTsZWjIiOheYpGKkyiyDd3Vvsadgya_/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. 

While writing a post choose HTML and add the code where you want the buttons to appear.

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 LINKNAME with the text you want to be written on the button.

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