Awesome Button using CSS3

by nikesh 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.

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.