Awesome Button using CSS3

by on 03/05/10 at 10:23 am

After my last post Infinite Zooming effect , I tried CSS animation on button. As we all have seen lot of pretty cool button made in CSS3. So I just use CSS3 properties to give a new look to Buttons.

Below I have attached the snapshot , to view the original output please visit DEMO.

Social Icons


Now let go through the code first .

Common CSS

.common{
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow:1px 2px 4px #000;
-webkit-box-shadow:1px 2px 4px #000;
font-size:13px;
width:135px;
height:25px;
overflow:hidden;
color:#FFFFFF;
cursor:pointer;
padding:8px 0;
}
.textShadow{
text-shadow:2px 3px 1px rgba(0, 0, 0, 0.5);
font-size:20px;
font-weight:bold;
font-family:helvetica,arial;
text-align:center;
height:30px;
}

Bottom Up animation:

HTML

<div id="blue" class='common' >
<div id='innerUp' >
<div id="upper" class=textShadow' >Button</div >
<div id="lower" class='textShadow' >Button</div >
</div >
</div >

CSS

#innerUp{
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#innerUp:hover{
-webkit-animation-name: buttonUp;
-webkit-animation-duration: 0.2s;
}
#blue{
background-image:-moz-linear-gradient(#42C6FF, #2A7CA1);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
                          from(#42C6FF), to(#2A7CA1));
}
#blue:hover{
background-image:-moz-linear-gradient(#3BB2E6, #277294);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
                          from(#3BB2E6), to(#277294));
}
@-webkit-keyframes buttonUp {
0% { margin-top: 0px;}
100% { margin-top: -30px;}
}

Top Down animation:

HTML

<div id="orange" class='common' >
<div id='innerDown' >
<div id="upper" class='textShadow' >Button</div >
<div id="lower" class='textShadow' >Button</div >
</div >
</div >

CSS

#innerDown{
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#innerDown:hover{
-webkit-animation-name: buttonDown;
-webkit-animation-duration: 0.2s;
}
#orange{
background-image:-moz-linear-gradient(#F7784A, #802614);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
                           from(#F7784A), to(#802614));
}
#orange:hover{
background-image:-moz-linear-gradient(#E66F45, #631E10);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
                           from(#E66F45), to(#631E10));
}
@-webkit-keyframes buttonDown {
	0% { margin-top: -30px;}
	100% { margin-top: 0px;}
}

Shock animation:

HTML

<div id="purple" class='common' >
<div id='inner' >
<div id="upper" class='textShadow' >Button</div >
</div >
</div >

CSS

#inner{
-webkit-animation-iteration-count: 3;
-webkit-animation-direction: alternate;
}
#inner:hover{
-webkit-animation-name: bounce;
-webkit-animation-duration: 0.1s;
}
#purple{
background-image:-moz-linear-gradient(#C67AFF, #682F94);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
                          from(#C67AFF), to(#682F94));
}
#purple:hover{
background-image:-moz-linear-gradient(#AC6ADE, #512473);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
                          from(#AC6ADE), to(#512473));
}
@-webkit-keyframes bounce {
0% {margin-left: 0px;}
25% {margin-left: 15px;}
50% {margin-left: -8px;}
75% {margin-left: 8px;}
100% {margin-left: 0px;}
}

Hope you guys like these effects which you probably have seen in flash..If you have any query , please post them in comments.

13 Responses to “Awesome Button using CSS3”

  1. Michael Pehl

    May 16th, 2010

    nice work… :)

  2. Flo

    May 18th, 2010

    great work! I hope CSS3 will be supported by the most common browsers

  3. [...] 17. Awesome Button using CSS3 [...]

  4. [...] Awesome Buttons using CSS3 Here you can check out a new look to Buttons that can be adjusted in CSS3: [...]

  5. Sara

    Oct 26th, 2011

    you’re actually a good webmaster. The website loading pace is incredible. It kind of feels that you are doing any distinctive trick. In addition, The contents are masterwork. you’ve done a fantastic activity in this topic!

  6. [...] Awesome Button using CSS3 As we all have seen lot of pretty cool button made in CSS3. Learn how to use CSS3 properties to give a new look to Buttons. [...]

  7. Fenix LED Lights

    Nov 23rd, 2011

    My brother suggested I would possibly like this web site. He was entirely right. This put up truly made my day. You can not consider simply how much time I had spent for this info! Thanks!

  8. salome

    Jun 28th, 2012

    it’s just Awesome. Thanks for the information shared. keep it up.

  9. CSS3 Tutorials

    Mar 26th, 2013

    [...] Awesome Buttons using CSS3 Here you can check out a new look to Buttons that can be adjusted in CSS3: [...]

  10. [...] Awesome Buttons using CSS3 Here you can check out a new look to Buttons that can be adjusted in CSS3: [...]

  11. Kinnari Shah

    Feb 6th, 2014

    Nice work. !

Leave a Reply