Creating buttons with CSS becomes a lot more comfortable. The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.
Update!
This example uses a small background gradient image to achieve the plastic look of the button. Click here for an updated version of the CSS buttons without any images at all.
The main CSS markup
.btn {
display: inline-block;
background: url(btn.bg.png) repeat-x 0px 0px;
padding:5px 10px 6px 10px;
font-weight:bold;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
border:1px solid rgba(0,0,0,0.4);
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}
By using RGBa color values, the button and text shadows always blend well with any color we’ll add to our button later on. No matter if we want the button to be green, red or blue. The code above always stays the same.
Using the common hex-values, we would get a result similar to the one on the right when hovering the button.
Adding the color
.blue {background-color: #CCCCCC; color: #141414;}
.blue:hover {background-color: #00c0ff; color: #ffffff;}
.green {background-color: #CCCCCC; color: #141414;}
.green:hover {background-color: #8aff00; color: #ffffff;}
.red {background-color: #CCCCCC; color: #141414;}
.red:hover {background-color: #ff004e; color: #ffffff;}
This is where we define the different color variations. All we need to change is the text- and background color along with the mouseover/hover values. To change the color of a button, just attach the corresponding class to the main button class.
| Share this post on Facebook, Twitter or Google+ | |
| Tweet | |
13 Comments for “Creating Dynamic Buttons With CSS3”
 Helledge |
|
|
Very nice lesson ;) |
|
| Helledge |
|
|
I know this method, but i prefer pure CSS’s solutions. So, I hope Microsoft make fix for IE8 (in older versions we never see it, as other things) in future, because all new browsers support it now. Anyway thank you! |
|
 Simon Day |
|
|
M$ have said that they will be supporting “Some” CSS3 in IE9 but there will be nothing in IE8. As usual M$ are holding everyone back… |
|
 David |
|
|
Hmm, these look really fab and professional, will definitely give them a try in my next project if I can |
|
 breadwild |
|
|
Stop whining. Forget about IE. So what if it looks like crap. That’s not the developer’s fault, it’s the fault of the person using IE”Hate” (or worse). Chances are the user will never know that the buttons look cooler in other browsers. So, don’t let myopic MS hold you hostage. Design and develop for those browsers that play by the rules and the people that have the sense to use them. |
|
 Aadil |
|
|
nice one… :) |
|
Beny Azam |
|
|
thanks for this pretty tutorial, :) |
|
 muVectors |
|
|
very good! |
|
 mikel |
|
|
Nice tutorial, i use dark buttons: |
|
... and 63 Pingback(s), 0 Trackback(s)
Leave a Reply
Featured
Recent Tweets
- @timsilva i try to do some more stuff in the future again, but time is always rare :)
- New Wallpaper! Part of the Smashing Magazine Wallpaper Calendar May 2012. http://t.co/aaIPOpMP
- http://t.co/jYA7rCR0
- The card deck prints arrived today! Here's a first shot taken with my phone. More HQ images and details within... http://t.co/EgrU5AZ1
- @KamiKa_SR like a boss
I know. This is because there’s almost no support for CSS3 in IE8 by now.
To get buttons with rounded corners and / or dropshadows working in IE you still need to work with multiple background images. Although it’s not as nice & flexible as using only CSS, it is save across all browsers. Take a look at http://tr.im/LwHd for a good tutorial.