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,223
VipraDoot
Holly Nicole
Free Blogger Theme
Replies
3
Views
4,543
rohanjain
Holly Nicole
[BLOGGER]Professional Author box
Replies
0
Views
1,978
Holly Nicole
Holly Nicole
[BLOGGER]CSS Notification Boxes
Replies
3
Views
3,519
Inquestor
P
How to make job search website?
Replies
1
Views
2,849
Jack London
Newer Threads
M
5 Ecommerce Solutions for Starting Online Stores
Replies
2
Views
2,901
andonoxi
Irish
Best ecommerce plugin for wordpress ?
Replies
1
Views
2,327
JakePeter
johnsmith
Tips to easily earn from affiliate marketing
Replies
7
Views
4,310
DP Affiliate
DPrat
Please have a look at WWW.PRATWORDS.COM
Replies
9
Views
12,443
DPrat
karmadir
WTS Inner Page Seo Service
Replies
1
Views
5,192
ShannonCanon
Latest Threads
J
Jtti: Windows & Linux vps cloud host as low as $2/month, Telecom CN2/China Unicom AS9929/Mobile CMI
Replies
0
Views
27
jtti
A
bad config or no config ?
Replies
0
Views
106
aLinux
K
Request for a server.
Replies
1
Views
90
AlbaHost
H
Anyone used fussionhost.com? Need honest reviews
Replies
0
Views
90
hasnainnazeer
J
Jtti April promotion, 40% off on Hong Kong cluster servers/US cluster servers, minimum monthly payment starts at $218.6
Replies
0
Views
267
jtti
Recommended Threads
MilesWeb
[MilesWeb] Year End Offer | 50% OFF On Dedicated Servers | India US | Plans @ $54.50
Replies
0
Views
1,316
MilesWeb
lisa dsouza
What is web hosting ? Why is web hosting necessary? Who Offers Best Web Hosting services?
Replies
4
Views
1,299
harry_v
amanwaa
Get Unlimited .gov Links - Google Search Trick
Replies
5
Views
861
Cheerag Nundlall
Fredrick
Not made a single red cent then you must see this ..
Replies
2
Views
3,152
Fredrick
pramod
Brand Awareness Through Twitter
Replies
1
Views
2,732
aishasony
Similar Threads
djsmiley2k
Clicking all buttons using console
Replies
1
Views
1,291
Dr. McKay
Maxoq
Resize animated GIF without losing animation?
Replies
1
Views
1,065
satopeng4
JOED77
The Best and Quick Way to Make Animated Videos.
Replies
6
Views
2,492
gelotologist
Lonric
WHITEBOARD (Doodle Videos) ANIMATED EXPLAINER VIDEOS and More!
Replies
2
Views
2,522
Lonric
rizwanramzan
Is there a way, we can convert flash files into animated images?
Replies
2
Views
2,604
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
  • domain
  • free
  • hosting
  • hosting services
  • marketing
  • offers
  • seo
  • server
  • services
  • vps
  • web
  • web hosting
  • website
  • wordpress
    • Top