Here is an another one CSS3 implemented method of using various buttons with animated effects. We have seen lots of cool buttons and various animated effects which made of either images or javascript. But here with CSS3 we have come up with new kind of implementing buttons with some effects. Below we have explained briefly, also we have given a snapshot.

See the DEMO here.

Now let’s 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.