Animated Buttons

Holly Nicole

Holly Nicole

Well-known member
Registered
Joined
Feb 22, 2013
Messages
170
Points
0
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>

Code: 
[COLOR=#000000][FONT=Times New Roman].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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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;}[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman].button:hover {background-position: top left;background-position: top left,bottom right,0 0,0 0;}[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman].button:active {bottom: -1px;}[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman].button.big {font-size: 30px;}[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman].button.medium {font-size: 18px;}[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman].button.small {font-size: 13px;}[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman].blue.button {border: 1px solid #84acc3!important;color: #0f4b6d!important;background-color: #48b5f2;background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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));}[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman].blue.button:hover {background-color: #63c7fe;background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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));}[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman].green.button {border: 1px solid #96a37b!important;color: #345903!important;background-color: #79be1e;background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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));}[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman].green.button:hover {background-color: #89d228;background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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));}[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman].orange.button {border: 1px solid #bea280!important;color: #693e0a!important;background-color: #e38d27;background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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));}[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman].orange.button:hover {background-color: #ec9732;background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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));}[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman].gray.button {border: 1px solid #a5a5a5!important;color: #525252!important;background-color: #a9adb1;background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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));}[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman].gray.button:hover {background-color: #b6bbc0;background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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));}[/FONT][/COLOR]
Use of Buttons

Large Buttons:
Code: 
[INDENT]<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>[COLOR=#222222][FONT=Verdana]
[/FONT][/COLOR][/INDENT]
Medium Buttons:

Code: 
[COLOR=#000000][FONT=Times New Roman]<a class="button blue medium" href="LINK">LINKNAME</a>[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman]<a class="button green medium" href="LINK">LINKNAME</a>[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman]<a class="button orange medium" href="LINK">LINKNAME</a>[/FONT][/COLOR]
[COLOR=#000000][FONT=Times New Roman]<a class="button gray medium" href="LINK">LINKNAME</a>[/FONT][/COLOR]
Small Buttons:
Code: 
[INDENT]<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>[COLOR=#222222][FONT=Verdana]
[/FONT][/COLOR][/INDENT]Replace LINK with your desired link and LINKNAME with the text you want to be written on the button.


Demo
 
Jack London

Jack London

Well-known member
Joined
Jul 9, 2012
Messages
158
Points
18
I can not see demo but I know Css3 is very strong to make effects instead of some graphics. Thanks for sharing good article here.
 
You must log in or register to reply here.
Older Threads
Holly Nicole
Why I Like Blogger Better
Replies
2
Views
2,475
VipraDoot
Holly Nicole
Free Blogger Theme
Replies
3
Views
4,751
rohanjain
Holly Nicole
[BLOGGER]Professional Author box
Replies
0
Views
2,270
Holly Nicole
Holly Nicole
[BLOGGER]CSS Notification Boxes
Replies
3
Views
4,341
Inquestor
P
How to make job search website?
Replies
1
Views
3,131
Jack London
Newer Threads
M
5 Ecommerce Solutions for Starting Online Stores
Replies
2
Views
3,075
andonoxi
Irish
Best ecommerce plugin for wordpress ?
Replies
1
Views
2,506
JakePeter
johnsmith
Tips to easily earn from affiliate marketing
Replies
7
Views
4,568
DP Affiliate
DPrat
Please have a look at WWW.PRATWORDS.COM
Replies
9
Views
12,726
DPrat
karmadir
WTS Inner Page Seo Service
Replies
1
Views
5,527
ShannonCanon
Latest Threads
BlueLeaf
How to Choose the Best Web Hosting for Your Small Business in 2025
Replies
0
Views
22
BlueLeaf
J
Jtti What impact does instance type have on cost?
Replies
0
Views
28
jtti
J
How do I periodically back up Fail2Ban configuration files?
Replies
0
Views
43
jtti
R
How much bandwidth is enough for a growing website?
Replies
1
Views
45
FerdieQO
J
How does Jtti Server Defend against DDoS attacks?
Replies
0
Views
237
jtti
Recommended Threads
arindamb
Should you work with multiple affiliate companies?
Replies
7
Views
4,417
Developer
N
I need a cpanel/directadmin(Linux) reseller package
Replies
2
Views
1,024
nihadislam52
JoeTaxpayer
How many percentages of free RAM should I have on a VPS?
Replies
5
Views
3,893
LJSHost
jeniffer26
Best social site to promote products?
Replies
8
Views
2,721
Philippe Gaucher
Mujkanovic
Difference between Flexible, Full and Full (strict) in Cloudflare
Replies
0
Views
3,126
Mujkanovic
Similar Threads
djsmiley2k
Clicking all buttons using console
Replies
1
Views
1,583
Dr. McKay
Maxoq
Resize animated GIF without losing animation?
Replies
1
Views
1,353
satopeng4
JOED77
The Best and Quick Way to Make Animated Videos.
Replies
6
Views
2,874
gelotologist
Lonric
WHITEBOARD (Doodle Videos) ANIMATED EXPLAINER VIDEOS and More!
Replies
2
Views
2,981
Lonric
rizwanramzan
Is there a way, we can convert flash files into animated images?
Replies
2
Views
2,837
digitalConnect

Latest postsNew threads

Latest Hosting OffersNew Reviews

Popular Contributors - Past 30 Days

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.
  • cpanel
  • dedicated
  • free
  • hello
  • hosting
  • hosting services
  • marketing
  • offers
  • seo
  • server
  • services
  • vps
  • web
  • web hosting
  • website
  • wordpress
    • Top