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.
Michael Pehl
May 16th, 2010
nice work…
nikesh
May 16th, 2010
@Michael Pehl .. Thanks Pehl…
Flo
May 18th, 2010
great work! I hope CSS3 will be supported by the most common browsers
May’s Best Resources for CSS3
Jun 11th, 2010
[...] 17. Awesome Button using CSS3 [...]
CSS3 Tutorials to Brighten Up Your Day - Noupe Design Blog
Jan 25th, 2011
[...] Awesome Buttons using CSS3 Here you can check out a new look to Buttons that can be adjusted in CSS3: [...]
Отличные CSS3 кнопки | div верстка,уроки верстки,html верстка
Jan 28th, 2011
[...] Источник [...]
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!
CSS3 Tutorials to enhance your work | Dreamincolor
Nov 5th, 2011
[...] 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. [...]
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!
salome
Jun 28th, 2012
it’s just Awesome. Thanks for the information shared. keep it up.
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: [...]
CSS3 Tutorials to Brighten Up Your Day | The News Block
Nov 1st, 2013
[...] Awesome Buttons using CSS3 Here you can check out a new look to Buttons that can be adjusted in CSS3: [...]
Kinnari Shah
Feb 6th, 2014
Nice work. !