Pretty CSS3 buttons
I’ve come across quite a few sites that explain how to create flexible CSS3 buttons but i’ve never really spent the time to implement one until i found a great little write up courtesy of the guys over at the Zurb blog who have a fantastic post on creating CSS3 buttons. So i’ve taken their example and tweaked it to fit my needs. It’s worth noting that if your using Internet explorer you’re not going to see all these effects as IE still doesn’t support CSS3. Compatible CSS3 browsers are, Safari, Chrome and FireFox 3+.
The Objective
We want to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. A button that is scaleable meaning that we can make it a variety of sizes and colours with ease.
The button style
This is the default class that is applied to each button on our page. We can customise a button is by adding a chain of CSS classes, this way we can set the colour and size. You’ll see below that we have an overlay.png background image. This gives us the gradient effect if your still conscious about IE6 you’ll need to use a PNG transparency hack to make 24 bit PNG’s render correctly.
Another feature with CSS3 is RGBA, This is the same as RGB but with an alpha layer allowing you to set the opacity of a colour. This allows us to easily change the background of our buttons containing div without us having to adjust the buttons style
.button, .button:visited {
background: #222 url(overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer
}
In the image below you can see that the background colour is different but the shadow around the edge of the button remains the same. If we had used a HEX colour value the left button on white would no doubt be something like #dedede and the button on black would be #333333. So you can see that using RGBA allows us much more flexibility when rendering shadows.
Button Size
Now we have the main structure of our button set on the .button class we can now go ahead and setup some instances of size. below we’ve set the classes .small .medium .large and .super. In all cases except for the .medium button we’ve just adjusted the font size and padding with the same button structure.
.small.button, .small.button:visited { font-size: 11px}
.button, .button:visited,
.medium.button, .medium.button:visited { font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.button, .large.button:visited { font-size: 14px;
padding: 8px 14px 9px; }
.super.button, .super.button:visited { font-size: 34px;
padding: 8px 14px 9px; }
Button Colour
The final step is to specify a CSS class for whatever colour we want our button(s) to be. In this case we have a set of predefined colours but you can adjust or add to these as you like.
.pink.button, .magenta.button:visited { background-color: #e22092; }
.pink.button:hover { background-color: #c81e82; }
.green.button, .green.button:visited { background-color: #91bd09; }
.green.button:hover { background-color: #749a02; }
.red.button, .red.button:visited { background-color: #e62727; }
.red.button:hover { background-color: #cf2525; }
.orange.button, .orange.button:visited { background-color: #ff5c00; }
.orange.button:hover { background-color: #d45500; }
.blue.button, .blue.button:visited { background-color: #2981e4; }
.blue.button:hover { background-color: #2575cf; }
.yellow.button, .yellow.button:visited { background-color: #ffb515; }
.yellow.button:hover { background-color: #fc9200; }
Wrapping Up
I like to put all of this style in a separate style sheet and adjust it to fit my needs. It’s completely flexible so you can easily add or remove styles to suit your needs.
Thank you for making this available & comprehensible Ashley- I had in fact seen these on Zurb and loved them- although I still have not decided as to where I will incorporate them as of yet, however : Im certain that the need will arise at some point . Greatly appreciate your efforts
M.
@Mia, thanks for the feedback. Im still not completely comfortable about using CSS3 techniques as its not fully supported but this was a particularly nice technique that I wanted to share.
These tutorials are popping up all over the web lately, but what i enjoy about your post Ashley is that it’s very to the point, and well designed so it almost mimics how you’d be implementing it yourself.
Thanks, and great work. Cheers!
Social comments and analytics for this post…
This post was mentioned on Twitter by ashleyford: Pretty CSS3 buttons http://goo.gl/fb/dtx0...
Beautiful buttons… CSS3 rocks! Thanks for sharing Ashley
-Deepu
Very nice! +1 (:
[...] Ford from PaperMashup is a sharing a nice tutorial about creating a set of pretty CSS3 buttons that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. [...]
This is nice but the problems start when u see in ie. The rounded edge is going and even though the shadow effect is also not there. Is any solution for that. If yes then it would be great
@Zahid, as I explained this is because IE doesn’t yet support CSS3.
[...] Pretty CSS3 Buttons [...]
i downloaded the code.
But it does not show anything
Pretty CSS3 buttons…
We want to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. A button that is scaleable meaning that we can make it a variety of sizes and colours with ease….
Ashley, awesome effect! Looking like pro PSD file. CSS3 is one of the developing master tool (if I can name it as “tool”). Thanks for sharing.
@vishal, just change file extension from .php to .html and should working.
Buttons nur mit CSS3 gestalten…
Ashley Ford hat in seinem Blog ein tolles Tutorial mit Demo erstellt wie man buttons nur mit CSS3 rund, farbig und schön erstellt. We want to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant bro…
Its quite easy to add Opera support:
http://dev.opera.com/articles/view/css3-border-background-boxshadow/
[...] [...]
[...] Pretty CSS3 Buttons [...]
I love this effects and buttons, please keep it up
thank you very much Ashley for this tutorial, ilt is very usefull to optimise web pages
[...] Pretty CSS3 Buttons [...]
Nice quick tut, just put this to practice and works well on ‘a’ tags.
Sadly, the browsers act quite differently if you use these classes on ‘input’ buttons. I think our best friend IE needs requires a set height instead of line-height:1;
Could always add more classes:
.button.small.input_button { height: 20px; }
.button.medium.input_button { height: 30px; } and so on..
Thanks for the tut, good stuff. Like the non-story mode and straight to the point style of it.
Flashmac. Thanks for the CSS update and Kudos! IE’s a constant let down…
Thanks very much!!!! Nice tutorial~ Help me a lot
Btw can anyone tell me does IE9 support CSS3?
[...] guys over at Papermashup have a great tutorial on creating sexy looking buttons that degrade peacefully in non-css3 [...]
[...] Ford from PaperMashup is a sharing a nice tutorial about creating a set of pretty CSS3 buttons that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. [...]
[...] Pretty CSS3 Buttons The Objective of this tutorial is to create a set of button styles that are cross browser compliant, can degrade gracefully for non CSS3 compliant browsers and are are entirely scaleable, meaning that you can make it a variety of sizes and colours with ease. [...]
Hello,
I think that there is a way to include IE8 and IE7 to this like button too
http://www.webdesignerwall.com/demo/css-buttons.html
Cheers
Hi Mika,
Thanks for the link,very helpful.
Ashley
Leave a comment...
Connect
Latest Poll
Recent Posts