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. !