SharedCopy of ZURB – Super Awesome Buttons with CSS3 and RGBA

Super Awesome Buttons with CSS3 and RGBA by Mark

April 28, 2009 in Implementation with 162 Comments

We've updated the super awesome buttons demo to include the button element and Mozilla box shadows. Check it out!

We love CSS at ZURB. We love it so much that we're using the new, yet-to-be released version (CSS3) in some of our projects. In the works for nearly 10 years now, CSS3 is finally starting to see the light at the end of the tunnel as new browsers like Firefox and Safari continue to push its implementation.

One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We've kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we've cooked up an example with some super awesome, scalable buttons.

The Button

Here's what we're looking at:

Our original button we'll use to show how RGBA colors rock your world. See how the hex drop shadow works on white, but not dark? We'll fix that.

It's a simple button made possible by a transparent PNG overlay (for the gradient), border, border-radius, box-shadow, and text-shadow. Here's the CSS that we've got so far to make this super awesome button:

.awesome{
background: #222 url(/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}

Not too shabby considering it's nearly all done with CSS. We could use CSS3 to do the gradient as well, but currently only Safari supports that. For a little backward compatibility, we'll keep it as a transparent PNG. Besides, the transparent PNG is easier to work with than setting the gradient in CSS since Safari only does CSS gradients at this point.

Making it Scale with RGBA

Sweet, so we've got our button styled up and looking great, but since we're using "static" colors (Hex value), this button doesn't scale very well. What if we need it to be shown on dark and white backgrounds? What about other colors? Here's where RGBA comes in.

Small Details. Notice the shadow on the button on the dark background? We fixed the buttons' shadow blending by using the RGBA colors.

With a little RGBA love, we'll scale this single button to add five more colors, two more sizes, and make it work on any background color. Check this out—all we have to do is modify three lines of CSS.

.awesome {
...
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
...
}

There, now we have our super awesome button with some alpha blending added in. Still looks the same right? That's because we have a 25% black border, 50% box-shadow, and 25% text-shadow in place of regular hex values. This gives us what we need to make our original button scale to various backgrounds, colors, and sizes. With the RGBA values, we have layers of color instead of separate colors, much like what you get when doing transparent drop shadows in Photoshop.

Adding the Colors and Sizes

Now that we've got our default button to where we need it, let's add some colors and sizes. Here's the CSS to do it:

/* Sizes ---------- */
.small.awesome {
font-size: 11px;
}
.medium.awesome {
font-size: 13px;
}
.large.awesome {
font-size: 14px;
padding: 8px 14px 9px;
}
/* Colors ---------- */
.blue.awesome {
background-color: #2daebf;
}
.red.awesome {
background-color: #e33100;
}
.magenta.awesome {
background-color: #a9014b;
}
.orange.awesome {
background-color: #ff5c00;
}
.yellow.awesome {
background-color: #ffb515;
}

Done Deal

And now we have six buttons, each with three different sizes. You can see the final coded example here to take a closer look at the code.

And there we have it: scalable buttons with minimal CSS that work everywhere.

Although this example may be overkill—who really needs this many button colors?—the point is that RGBA is actually much more powerful than typical Hex values. Consider this: if we were using hex values, we'd have three times the CSS per color—one color for background, one for border, and one for text-shadow.

With a little CSS3 magic, we've created a scalable set of buttons with nearly half the CSS it would have taken with hex colors. Give it a go in your next project and see how it can help add that extra polish you want without huge impact on your code.

162 Comments

Jon Victorino says:

Awesome indeed!
Mark says:
Thanks, Jon—glad you like it.

We were asked about this on Twitter, so we might as well post it here, too: these styles can be applied to a button element very easily. Just modify the CSS selector to this:
1. a.awesome, button.awesome {
2. /* CSS here */
3. }
And bam! Buttons and links styled. Be aware, however, that FF3 treats buttons and links differently—it mysteriously adds more padding around buttons.
Azad says:

Wow. These are amazing. Looks quite decent in IE too!
Mark says:

Thanks, Azad! On your note about IE, we plan on following up on how take this and backwards engineer it to work for as many browsers as you'll need.

Right now, these buttons work dandy in IE7, FF3, and Safari, but FF2 and IE6 would definitely have some bigger problems.
Scott says:

for IE6, the issue is with the PNG. If you use a child selector to set the PNG IE6 will not interpret the selector style and the color will show on the button. In order to do that the button, or link would need to be a child of something.

div > .awesome
{ background PNG here }
Mark says:
Indeed, IE6 will render the infamous blue background for any PNG, and since we're tiling a PNG, it will appear over the entire button, making readability difficult and colors hidden.

An alternative option, although I like yours quite a bit, is to just target IE6 with it's own CSS in one of two ways: browser detection or the proprietary filters.

Browser Detection

Use some kind of server-side script to determine a browser and it's version, then add classes to the body tag. It'd look like this for IE6:
1. <body class="ie ie6">
2. /* HTML here */
3. </body>
IE Filters

Using what Microsoft's given us to specifically target versions of IE:
1. <head>
2. <--[if IE 6]>
3. <style type="text/css>
4. /* IE6 Specific CSS Here */
5. </style>
6. <![endif]-->
7. </head>
Pretty easy to do any way you choose, but some would argue it's not worth it. Either way, hopefully we can begin to phase our IE6 more and more and not have to worry about details like this :).
Dan Lewis says:

Brilliant, as always. Thanks!
Gedy says:

This is great! Thanks so much for sharing it.
FP says:

@Mark

Re: More button padding in FF3

If you look in your firefox-install-dir/res/forms.css file you'll see Firefox sets -moz-box-sizing: border-box on buttons. That might be the issue you're seeing (or it might not) but you could try overriding it:

http://www.w3.org/TR/css3-ui/#box-sizing
Mark says:

Thanks, @FP. Just gave it a whirl, but it doesn't appear to fix the problem. We'll look into more shortly to see if we can find something. Hopefully it gets fixed in FF 3.5!
Matt Wiebe says:

Nice article. Looking forward to all of this CSS3 stuff coming into use!

You might want to consider updating the box-shadows to use -moz-box-shadow as well, as the soon-to-be-released Firefox 3.5 will have that.
Josh L says:

This is a great RGBA crash-course. Thanks for the article!
Abdel says:

Great! Thanks for this article. I am going to use this buttons from now on!
Really superb!
Chris Sharp says:

I was working on a project a couple of months ago and I decided to use text-shadow and box-shadow a lot. The problem was that, as in this example, the background colors were often different and I was creating a lot of lines of CSS to sort it out.

Then I realized that I could safely use RGBa for the shadow color because the browsers that support text or box shadow also support RGBa.

After I'd worked this out I felt kinda stupid cos I assumed that everyone else was already doing this, my logic being that when I create a drop shadow in Photoshop I set the color (generally black) and then the transparency. But it looks like I may have been ahead of the pack on this one.
Jon Thomas says:

Cool stuff. What's the selector technique you're using such as: .small.awesome ?? I haven't seen this.
Mark says:
@Jon Thomas: With CSS, you have the ability to "stack" or "chain" classes. .awesome applies the basic button formatting, while .small changes the relative size. By chaining the classes, we create very specific selectors for different elements.

.small.awesome works like so: find all elements with both small and awesome as classes. If we simply used .small and .awesome separately, we'd end up with CSS that could be applied to anything. Here's a look at the HTML:
1. <a class="awesome">Awesome Button</a>
2. <a class="small awesome">Small Awesome Button</a>
The .small.awesome skips the first button, but applies to the second. That help?
Brooke Schreier Ganz says:

These are indeed super awesome buttons. Thanks!
Sklep Zoologiczny says:

Awesome, just awesome 0_o When all browsers will support CSS3 photoshop will be unnecessary
Sklep Zoologiczny says:

Awesome, just awesome 0_o When all browsers will support CSS3 photoshop will be unnecessary
Jaik says:
@Mark: Try this to fix the weird Firefox button padding:
```
button::-moz-focus-inner { padding:0; }
```
Martin Gonzalez says:

Awesome. thanks!!
Montana Flynn says:

Thanks for the awesome post, it really opened up a new way of using CSS for me. I checked out the buttons in IE and they looked fine, is it because I use a pngfix.htc file to get rid of the IE png bug, or did you update the code as suggested in the comments?
Michele says:

These are gorgeous! It's because of things like this that I can't wait for CSS3 to be implemented in more browsers. :)
Alex S. says:

Very good!!

It would be perfect if doublt click won't select text on the button...
Corrianna says:

I haven't tried putting these buttons anywhere yet, but I've noticed that on all 4 corners of all the buttons (and all the fields in this comment form, too) have little black caret-shaped lines (this is in Google Chrome). Is there a way to fix this? Other than that, these buttons are amazing! Bravo! :)
Corrianna says:

I haven't tried putting these buttons anywhere yet, but I've noticed that on all 4 corners of all the buttons (and all the fields in this comment form, too) have little black caret-shaped lines (this is in Google Chrome). Is there a way to fix this? Other than that, these buttons are amazing! Bravo! :)
Justin says:

Here's what I have to say about IE6 support: DON'T.

It's taken soooo long to implement these sorts of forward thinking elements because of one bloody browser, and it's as old as some developers I know..

P.S. I love what you guys have posted here. Some great accomplishments are going to be had due to this.
Mark says:

@Justin: I know it sounds like a cop out, but what it boils down to is audience and the site you're working on. For instance, within our new app Notable, we want our marketing site to work in everything including IE6 (gotta get the message out!), but the app itself only works in IE7 (and FF and Safari).

Definitely don't let it hold you back, though. Pushing forward is great, but if you can do so by showing a little love to those you leave in the dust, well that's just an little something extra on top, no?

(And thanks for the retweet!)
Daniel Pospisil says:

Very nice :) Thanks.
indr@ says:

thanks for your article about CSS, but I still newbie in design including CSS :D
Rahul says:

Nice CSS technique. Do you have a download link for this one?
Tyler says:

To get the shadow to look correct in FF add this:

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

Should work for FF 3.5
Mark says:

Thanks, all! Glad to see everyone likes 'em!

@Rahul: You can find the demo here. Just save the page via your browser.

@Tyler: Good call, will do. The other great thing about FF3.5 is that it allows for text-shadows now!
labtech says:

The effect is nice, but IE 8, 7 and of cource 6 doesn't support this. I think it would take a lot time until webmaster can use this technic.
Iva says:

In Firefox 3.5.1, this looks just awesome! Thanks.

In IE8, the effects are viewable, just the rounded corners don't work. But guess what? This site itself is NOT viewable. O_O

While I normally use Firefox, I think you're not doing the right thing by making your site completely unviewable in IE. I understand that IE6 is obsolete, but making a site scroll on its own without me touching anything in IE8 is a bit odd. I had to press the compatibility button and let's see if it'll even let me leave a comment.

I know from own experience that I would't want to lose my IE visitors.
Wallace says:

You did a great job, i like the button a lot, thanks your sharing.
Mark says:

@Iva: Glad you like the buttons—in FF3.5, at least! :) We've tested our site in IE8 and it appears to be working just fine. What kind of problems are you seeing when you say the site is not viewable?

It sounds like there's something else going wrong if you're page is autoscrolling; we don't have anything that does that.
Fuad says:

SImpel and nice, I just love simplicity! I wonder if IE9 is going to support CSS3 :-P.
Matthias says:

Sweeeeet!
Turki says:

Thanks, but can you attach a source code to us ? to become more clearly ..
Kim Steinhaug says:

Well, IE v8.0.6001.18784 here... I loaded your page and while it started rendering nicely it starts hanging after a few secs and becoms white... Then you get autoscrolling roing to the right while the vertical scrollbar tells me that the site is extremely long... I switched to Firefox to see your site, so Iva is correct - your site does NOT work in IE8.
Kim Steinhaug says:

Just checked it again, it is a very funny bug I might add! Never saw anything like it. After a few seconds it hangs, I also get a Javascript error on the page - to bad I do not have any debugger tools on this PC so I cannot be of much help at the moment. What happends - maby some people could sniff out the bug - is that the orange line is kept at the top. Then it seems you get a sudden 3000px padding between this line and the rest of the page vertically - you may scroll to the bottom and the page is there. Then, like there was a meaning for it - a left padding/margin for the entire page is incremented by maby 5px or so once/twice a second making the page grow in width.

Viewing the bug in action it almost seems like there is a point for it, :D I suspect there is some javascript that fails in IE8 and does some crazy stuff to the layout, especially since you get that JS error in IE8.

Apart from that, back to your buttons - lovely to see fellow developers taking advantage of the new possibilities of the web! Another thing is how we get out users to switch to browsers that has theese capabilities!
Josh L says:

You should update this to include -moz-box-shadow for FF3.5! :)
CSS Guy says:

You should never use <a> tags as buttons. This is VERY BAD HCI. And has a numerous problems with bots and auto readers accessing the HREF. Google strongly advises against this.

What you have designed is great, but please redesign this do annual BUTTON or INPUT Button.
Mark says:

@CSS Guy: The point of making some links look like buttons is simple: sometimes we want a link to look like a button because it gathers more attention than just text. That's why we've built these buttons in a way that allows for both.

By leaving the CSS open ended, and by that I mean not assigned to a specific element, we allow for both buttons and anchors. We've just updated the example demo of the buttons to include Mozilla box shadows and a demonstration of super awesome buttons with the button element.

Check out the new stuff here »
Mark says:

@Kim Steinhaug: We've fixed the IE8 bug! We were running a version slightly older than yours. It turns out that IE8 didn't like a position: relative we had on our containing div. We've removed it for IE8 for now.

We've also fixed the javascript errors your saw. One was for javascript that was no longer needed and the other was an older version of Prototype.
Hugo Moreno says:

Excellent thanks for sharing it!!! I love the simplicity of the CSS3 code.
Dave says:

these are AWESOME. very easy to implement. i'm definitely going to use them on my next site
Vikas KM says:

Wonderful post.... i wanted one button... but didn't knew how to develop.. thnx for the tutorials.. i m subscribing you RSS now....

thnx for sharing
The Dude says:

would LOVE to use this... but my large, corporate client won't get off of IE 6. I can't even bring it up to them anymore... they won't switch. I've pointed out that Microsoft wants them to stop using it and that DIGG & YouTube are about to stop supporting it but they don't care: their IT department won't switch them so it is a non-starter.

Maybe in a year or 2 I will be released from IE 6 development hell...
Jonathan says:

Hey,

Fantastic buttons. My only issue is that in Safari, the buttons come out square, not rounded. Really not sure why, they look fine in all other browser.

Let me know if there is something you can think of.

Thanks,

Jonathan
Mark says:

@Jonathan: What version of Safari are you running? The rounded corners only work for Safari 3.x and up.
Karl says:

If it does not depress like a button, then, IMO, it's not a button.
Marios says:

Guys both rounding and alignment don't work on ie :(
Mark says:

@Karl: We've gone a different route than adding that kind of active state. Instead of giving the button an indented look on the :active class, we've opted for a 1px move downward on click. Think of it like a keyboard key or a mouse button. Those move down, but don't give the visual impression of a depression.

@Marios: No, unfortunately these buttons weren't designed with IE (v6, 7, or 8) in mind. They degrade to rectangular buttons with no text-shadow, box-shadow, or border-radius. The point of this post was to show what can be done with CSS3 and the RGBa color values to create a scalable set of buttons with multiple colors and sizes.
amine says:

very nice and they seem like images...
gh says:

usefull article. thanks :)
oyunlar1 says:

really amazing buttons.. thanks so much for sharing it.
Bradford Sherrill says:

Excellent post, very useful vs the static png images
Nick Rougeux says:

This is such a great example of progressive enhancement and graceful degradation. It's one of those small touches that can make a world of difference on some sites. I've already implemented this on a new page of my site. This is one of those posts that will wind up getting referenced by every list for useful techniques for years to come.
Alek Davis says:

I noticed something weird: buttons in the Using the Button Element section look fine in IE8 (well, obviously with the exception of rounded corners), but they do not get rendered correctly in IETab (some buttons overlap).
haberler says:

i have to say really awesome work. Thanks
Michael Curry says:

Thanks!

However, in order for new button element styles to render properly there is one thing you need to add to the in-page styles that is in Zurb's global.css stylesheet. Adding this style (below) to top of the in-page ".awesome" styles will finish the button elements with the intended brushed bevel look. Without this style they render with an inset border.

SO ZURB - PLEASE, ADD THIS BELOW TO IN-PAGE STYLES on EXAMPLE PAGE - FOR EASY COPY FOR FOLKS LIKE ME :)

/ Above all awesome button styles - you need to clear the default button style before adding awesomeness! /

button {border:0 none; margin:0; text-align:left; }
John Faulds says:

You could probably solve your IE6 problem by using 8-bit PNGs with alpha transparency rather than 24-bit. IE6 has partial support for alpha transparency on 8-bit PNGs and in the case of a gradient like that, it would probably show nothing at all but would still allow the colour behind to show through correctly.
LOTR says:

Nice. But they're just a button.They don't open a new page.I want to give link to them.Exp: Super Awesome Button (when i click it my homepage will open) How can i to that?
Mark says:

Great ideas all around, everyone. Glad to hear you all like them!

@Michael: Thanks for pointing that out. We'll factor our global styles into the code with our next update.

@John: That's a good idea. For now, we turn off background images on our buttons to present just the background color.

@LOTR: This "button" styles are for both links and actual buttons. You can add the proper classes to either of those elements and achieve the action you're referring to.
Darren says:

Can this be used to style a select (combobox) as well? Not sure about the down arrow? I'm a bit new to this CSS stuff, but am loving it.

Many thanks. Oh, GWT 2.0 rocks with css.
Tuscaloosa Web Design says:

Very slick. I love being able to create basic visual effects with CSS without having to use Photoshop.
Cespur says:

This article is awesome, but untill Internet fucking Explorer will allow it I can't use it. A shame, really, 'cause this sort of effects are awesome indeed.

Damn you, Microsoft and your damned Internet Explorer.
Navrang Panchal says:

Here its website which support IE6 and other browser. but simple box might be help its out to you. this link :http://www.bestinclass.com/blog/2008/css3-border-radius-rounded-corners-ie/

have checkout.

cheers

I really happy to see your blog news things looking to hear from you. new things.
Mark says:

Cool article - thanks. BTW, what CSS editor are you using?
Ow says:

Very very, very nice !!!! Tanks man ! ;D
Tobias says:

Thanks a lot I was looking for exacltiy this :-).

Under which licence do you publish this css-html-code? Is it public domain? Or some kind of CC-Licence?

Thanks
Mark says:

@Mark: We use Coda and Textmate at the office.

@Tobias: Glad you like it! We haven't published it under any particular license, but that may be something we look into in the future. Feel free to use this code in any of your projects though :).
James says:

Hi,

I was wondering if we are free to use the css and png you created for this amazing piece of work?

Zurb would of course be credited in CSS comments associated with the classes.
makuchaku says:

As Michael mentioned, one needs to add button {border:0 none; margin:0; text-align:left; } in the CSS file to make the buttons complete.

Thanks a ton for the awesomeness!!

-- Maku http://makuchaku.in
Florian says:

If you still support IE6 you can use a behavour for transparent pngs:

img {behavior: url("iepngfix.htc");}

download and demo @ http://www.twinhelix.com/css/iepngfix/
Gregor says:

Hey guys, this is indeed awesome work. I started using your super awesome buttons in some of our projects and everbody loves them!

While working with them, I made some tweaks, e.g. to avoid the necessity of configuring two different colors for the different state and to add a super awesome onclick Design these buttons just deserve!

I posted a short post about it, check them in our blog: http://www.elctech.com/core/make-your-buttons-look-super-awesome I hope you like it!

Once more, thanks so much!
Andreas Stephan says:

Truly awesome! Thanks
chopeh says:

Damn. They are some awesome buttons.

Think I'll be using them in some future projects, since they degrade pretty nicely.
Miles says:

These are a great example of what's possible with CSS3, the buttons look great. My only issue is that you've decided to remove the link's and input's outline property, rendering any website using these kind of links useless to users who navigate by tabbing through an interface because of disabilities.

If you don't like the default focus style you can change it with css or create a new :focus style where applicable without impeding users who must use a keyboard to navigate. The default styling of your website removes these outlines as well, without specifying a separate :focus style. You've obviously made a conscious decision to do this, either because you don't believe that disabled users visit your website or that you prioritise the aesthetics. I would ask that you leave some kind of focus style in place when you create examples like this one however, just because users who may not be aware of the issues involved will copy your CSS and create their own sites where there is no focus style on these links and inputs when otherwise there may have been.
Ryan says:

how do i get the .png you are using, when i save the page i get all images and files but i dont get the .png?

Help, sorry if this is silly Q!
sebastien Barrau says:

How would you recommend i add an image in front of the text for just one button ? I'm using the buttons on this site www.sebastienb.com/clients/sas/ and i would like to have all my donate buttons have a hand in front of the text like you see on www.sowaseedonline.org

thanks for the help.
Kees says:

These buttons are very, very awesome!!!!! Thanks :). This really rocks! I've never seen such good-looking buttons.
Timpaay says:

Thank you!!! :)
honour chick says:

great techniques , thanks for the tutorials. ;)
Alexey says:

В своих компонентах начал использовать такой стиль кнопок
David says:

Thanks for a great piece of web design!

One question though... is there a way to get this to validate to CSS3? Validation doesn't like the corner radius properties...
Jonathan (ZURB) says:

@David Unfortunately it won't validate according to the W3C until the spec is finalized - the validator doesn't recognize most engine-specific properties (i.e. -webkit-border-radius). Once the spec is final it'll be changed to just border-radius and the W3C will start to validate it.

Right now not even the major engines agree on the implementation, as you can see in the corner-specific declarations like: -webkit-border-top-left-radius vs. -moz-border-radius-topleft.
Paul Dixon says:
Instead of using an image file for the gradient you can use a data uri. This has 2 benefits:
1. You dont have to worry about the location of the image file on your server because its in the CSS
2. Because IE6 doesn't understand data uri's it doesnt display any overlay on the button, hence displaying the right colour without any CSS hacks! :)
I converted your overlay image to a data uri :

background: #222 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAClJREFUeNpi/v//vwMTAwPDfzjBgMpFI/7hFSOT9Y8qRuF3JLoHAQIMAHYtMmRA+CugAAAAAElFTkSuQmCC") repeat-x;

Amund says:

No more text selection on buttons :

-moz-user-select: none;
-webkit-user-select:none;
-khtml-user-select: none;
user-select: none;

Sandro says:

Hello I'm trying to give this style to inputs but what is shown is different, do you why? The left and top borders are white
Sandro says:

nevermind I meant button, my mistake it's working now anyway
Chrome says:

i dont know how to apply this code, is there any video tutorials???
Hades32 says:

Please add the non "-moz-" "-webkit-" properties, too.
Egypt Travel Portal says:

Awesome ! i was looking for this lesson and found it in Digg ... thank you so much
Egypt Travel Portal says:

Awesome ! i was looking for this lesson and found it in Digg ... thank you so much
Erik says:
The IE6 conditional comment in the CSS would be a nice trick if IE6 dealt with chaining classes the right way.

I was trying to do multilple sizes using a base class, then chaining classes to make the link a big button or little button.
```
.awesome {
// would be the base CSS code
}

.lrgButton  {
// would be the CSS to make it the larger button
}

.smlButton {
// would be the CSS for the smaller button
}

<a href="yourdomain.com" class="lrgButton awesome">Your Link</a>
```
Should look different than:
```
<a href="yourdomain.com" class="smlButton awesome">Your Small Link</a>
```
Since IE 6 doesn't understand the chain correctly and appears to only interpret the last class in the chain, the chain doesn't work and the conditional comment is wasted.

If you want to use a conditional stylesheet to target IE6, your going to need to ditch class chaining and write specific classes for each different size and or color.

Just thought I'd share and save others some time in the fight.
Zibri says:

I strongly suggest to add:

onselectstart="return false" on your 'awesome buttons' :)
Virtual Consulting says:
I suggest you add this line:
`input.awesome, button.awesome {
```
border: 0px;
```
}`
This line drops the borders in button and submit input tags.
Very good article.
Regards
brothercake says:
@Amund and @Zibri - both of your suggestions are major accessibility issues, and hence, extremely bad advice. Developers should not do either of the things you're suggesting (ie. don't remove the user focus, and don't prevent text selection).

In fact as far as user-focus outlines go, you should add something to make them more obvious, not less. Something like this for example:
```
.awesome:focus
{
    outline:2px solid rgba(0,100,200,0.5);
    -moz-outline-radius:3px;
}
```
@Jaik - that's a nice idea to fix the button padding issue, but it only partially works - it removes some, but not all, of the excess padding; what's left corresponds exactly to the space taken up by the user-focus caret, which is odd - the outline caret shouldn't take up screen space, it should be overlaid...
brothercake says:

@Erik - IE6 does support multiple classes, but it treats chained rules as OR instead of AND -- ie. a rule for .awesome.large will apply to an element that has either of those class names, instead of (as it should be), both of them.
Max says:

thanks! Very useful article, it works
Lee Smith says:

Love the buttons! I added them to a project of mine and I think they turned out great.

http://www.opensourcerails.com/projects/339403-TicketMule
hasfa says:

awesome..great and nice button. Thanks for all this. for next project i surely use it.
Metric Stormtrooper says:

and again, IE fcuks up on css3 properties and leaves a plain colored box :|
Sean says:

Metric is correct, it just shows a giant plain-colored box for IE.
Java developer says:

Very informative. Thnx
web design says:

Hi, this is great and zurb help me alot, thanks for code .
Yaaaaaa says:

button {border:0 none; margin:0; text-align:left; }

You need this in the STYLE tags of your demo. Otherwise the buttons look awful in FF because of the FF button borders on BUTTON elements.
Mehedi says:

Awesome .....
Oyun Oyna says:

Thanks, but can you attach a source code to us ? to become more clearly ..
Oyun Oyna says:

Thanks, but can you attach a source code to us ? to become more clearly ..
pewe says:

very handsome and simple elegant... :)
Andrea says:

Internet Explorer 7- show button (and input) elements larger than they should be. Add a bit of magic:
input.awesome, button.awesome {overflow:visible;}
this does the trick, don't ask me why, it's IE :-)
Jordan Walker says:

excellent resource to style and implement buttons.

Bart Bons says:

When you use Safari (Snow Leopard) you should also copy the following css style from the global.css:

body { -webkit-text-stroke: 1px transparent; } /* Snow Leopard Safari Type Fix */
@media only screen and (max-device-width:480px) { body { -webkit-text-stroke:0 black; } } /* Undo the fix for Mobile Safari */

This makes the button font look more crispy. Or you can add the style to the buttons only:

.awesome { -webkit-text-stroke: 1px transparent; } /* Snow Leopard Safari Type Fix */
@media only screen and (max-device-width:480px) { .awesome { -webkit-text-stroke:0 black; } } /* Undo the fix for Mobile Safari */

Savunma Oyunları says:

This is great! Thanks so much for sharing it.
Fredrik Karlström says:

Wonderful work, I love it! Together with the base64-fix Paul posted above it's very lightweight and flexible. Thank you for sharing!
Volomike says:

I found problems in IE6 with this until I reversed something like:

.button.red

with:

.red.button
Jonathan (ZURB) says:

@Volomike IE6 has trouble with sequential selectors - funny as it seems many times the fix is exactly that, just modifying the order of classes. Gotta love IE6.
Volomike says:

Also, as of Opera 10.50, "border-radius" is now supported and should be used, anyway, to make way for the "border-radius" CSS3 property. I didn't see that in your code as of March 11, 2010, so please consider that. It should be appended after the other *-border-radius items.
Mike says:

thanks, great tuts. Recently I have read the book of Krug about Usability and I realized that nothing can change the function of a button in a website. This tuts just adds more convenience and makes life of designers easier.
oyunlar1 says:

Wonderful post.... i wanted one button... but didn't knew how to develop.. thnx for the tutorials.. i m subscribing you RSS now....
Accappella Creative says:

Brilliant, Great demonstration on how to create good looking buttons without the use of images. Will save lots of time not having to create image graphics and can use live text links in a stylish way. Thumbs Up. :)
Marcelo says:

Excelent work, very clean! I love the way you´ve used rgba colors to do the magic, after 4 years of pure CSS work, I´m glad to find new great things along the way. Thanks for sharing!!
Savunma Oyunları says:

very handsome and simple elegant... :)..
araba oyunları says:

Excelent work, very clean! Nice. But they're just a button.They don't open a new page
timani says:

Briiliant article on the buttons! I agree CSS3 is pretty awesome and hopefully there will be better browser compatibility soon, it really will allow for more control over the UI as well speed up development time.

No more cutting and fiddling around with images and photoshop/gimp for button backgrounds to get a decent layout.
savaş oyunları says:

I didn't see as of March 11, 2010, so please consider that. It should be appended after the other *-border-radius items.

kelly Johnson says:

to get rounded edges in IE, google border-radius.htc. Stick that in the same directory ass the css.

In your styling, just add: behavior: url(border-radius.htc);

so, you would have this on a div:

position:absolute;
top:112px;
left:25px;
width:750px;
height:550px;
background-color:#FFF;
border: 1px solid #fbce01;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(border-radius.htc);

Anthony says:

Really great job, congratulations!

I had a little “IE7/8 problem” when adding this CSS on some pages: The buttons were placed in a container with property overflow:auto; (to fill about half of the height of a screen). OK. Those which were "outside" of the container (need to scroll to see them) "flew" above the rest of the page on IE7/8. I saw them going up or down, outside of my container...

To solve the problem I added a property position:relative; to the "overflowed" container.

Hope that could help someone...
Derrick says:

Excellent! I just wish browsers would get up to speed!
super awesome says:

They are super awesome, my only concern would be how much cross browser compatibility do they offer.
Jacque says:

Great buttons! I am trying to include these in my Static FBML tab. Where exactly does the code go?
J.F. Herrera says:

Excellent work. Impressive to see that very little PS was required.
Juegos says:

Simple and professional. Thank you guys. Sublime!
barbie oyunları says:

This line drops the borders in button and submit input tags.Thanks
Alan Feekery says:

Great resource. Thanks very much!
oyunlar1 says:

i loved it very much!.. with the base64 fix. it is really lightweight..
Evert says:

I agree with VoloMike, it would be fairly easy to add Opera support to these indeed very awesome buttons. I added border-radius: 5px; to the code for my own project, but maybe this code can be updated too, so everyone can enjoy these buttons in all browsers?
Buy Used says:

Really good stuff....! Very useful. Thanks.
Birmingham Web Design says:

Really useful post - just tried this out in my Facebook Fan Page and looks ace!
Sivaranjan says:

This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time. I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind. :)
denim says:

Really useful article. Thanks for sharing
konto says:

this i was searching for! thx guys. buttons like this are not only looking awesome. they also reduce the time server need to load the website. great!!
Greg says:

Love these buttons! Using them in a soon-to-be-public project, though I will likely throw in some fallback.

A question, though: I haven't been able to suss out exactly what the overlay PNG is doing. I thought it would have a gradient of some sort, but it doesn't seem to. The net effect of the overlay seems to just be lightening the various elements of the button. Is that correct?

Makes it a bit tricky to match up corporate colors, but I'll find a way, as long as I understand what the overlay is doing. ;-)

Greg
Oyunlar1 says:

Wonderful Stuff you post!! I LOVE it!
James says:

I know it's not too major, but be prepared for those round corners to default to square in Internet Explorer browsers...

Last I checked, even Twitters round corners are square in Explorer...

Not a major deal, but if you tell your client they are round corners and they go to look at them in Explorer...
Jeffrey says:

this doesn't work in ie7.

also, this page is TOTALLY messed up in ie7.

:(

maf says:

<div class="section">
   <h3></h3>
   <form class="form">
        <span class="textarea">
             <textarea name="text" cols="" rows="4"></textarea>
        </span>
        <span class="textbox">
              <input type="text" name="email" id="email" />
         </span>                                
    </form>
</div>

candy says:

Thanks for sharing, I love it very much!.
Stuart P. Bentley says:

Don't forget to specify the non-browser-specific versions of those CSS elements for the final standardized version. That's the one thing that's keeping you from working in IE9 right now.
Aaron Vail says:

this is awesome! outstanding post! thanks so much for sharing! CSS3 is awesome!
Eddie says:

Don't -moz me bro! Web standards FTW!
ckdo says:
For buttons, property
```
border: none;
```
is needed

Thank you ;)

Ian says:

Stupid question. New guy here. How so you get the buttons to move like they are physically being pushed down. I tried using your example code and setting an active declaration but then it moves my borders and such down as well. Here's what I used:

.awesome{



background: -moz-linear-gradient(top, #000, #fff);
background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#fff));
display: inline-block;
padding: 5px 10px 6px;
color: #294069;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;


}

.awesome {

...
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
...


}

.awesome:active {

margin: 2px 0px 0px;
}

Any help would be greatly appreciated. Just found this site via Web Designer Wall and I love it already.

Jonathan (ZURB) says:

@Ian The buttons in our example move not based on the top margin, but on a relative position of top: 1px - basically telling it to move the button 1px down from its top border. You can do the same thing with -webkit-transform: translateY(1px);

We've learned over time though that many browsers have trouble detecting the correct click event for a moving object, so you can miss clicks on the buttons. You might try using a depressed state instead, where the :active class would use a reversed PNG overlay. Hope that helps!
Ian says:

@Jonathan Awesome. Thanks a lot. Now all I have to do is figure out how to make these buttons do something besides open a link, but I'm pretty sure that has more to do with JavaScript and PHP than CSS. I'll definitely be adding this to my RSS feed.
Ian says:

BTW, just tried to subscribe to your blog and it's returning a 404 @ the FeedBurner site and it's not doing anything when I click the button.
Jonathan (ZURB) says:

@Ian Looked like Feedburner was down - sorry about that. Should work now.
CyberSkull says:

Could you update this to include gradient (as supported by Gecko & WebKit) as well as the updates to border-radius (currently only -moz- requires prefix)?

Add your comment...

About the ZURBlog

The ZURBlog is where we discuss design interaction and strategy. We use design thinking to challenge businesses and designers to improve the products and services they create.

Blog Topics

What's the ZURBword?

ZURBword.com is our thoughts on interaction design and strategy. What?

ZURB's article on Mashable: Why You Should Be Your Own Toughest Competitor?
Our very own Jeremy Britton wrote a great article for Mashable on how to design like Apple and be your own competitor.
Great Web Apps covers Bounce - The Best, Most Awesome Web Apps
A big thank you to Stu Green for a great plug on GWA for Bounce. First one to find the "Shut off the lights" button on Bounce! :)
ZURB gets interviewed on CSS3.Info
A huge thank you to Chris Morley for a great interview with ZURB about our crazy love affair with CSS3.

The ZURBlog is where we discuss interaction design and strategy.

Super Awesome Buttons with CSS3 and RGBA by Mark

April 28, 2009 in Implementation with 162 Comments

The Button

Making it Scale with RGBA

Adding the Colors and Sizes

Done Deal

162 Comments

Jon Victorino says:

Mark says:

Azad says:

Mark says:

Scott says:

Mark says:

Browser Detection

IE Filters

Dan Lewis says:

Gedy says:

FP says:

Mark says:

Matt Wiebe says:

Josh L says:

Abdel says:

Chris Sharp says:

Jon Thomas says:

Mark says:

Brooke Schreier Ganz says:

Sklep Zoologiczny says:

Sklep Zoologiczny says:

Jaik says:

Martin Gonzalez says:

Montana Flynn says:

Michele says:

Alex S. says:

Corrianna says:

Corrianna says:

Justin says:

Mark says:

Daniel Pospisil says:

indr@ says:

Rahul says:

Tyler says:

Mark says:

labtech says:

Iva says:

Wallace says:

Mark says:

Fuad says:

Matthias says:

Turki says:

Kim Steinhaug says:

Kim Steinhaug says:

Josh L says:

CSS Guy says:

Mark says:

Mark says:

Hugo Moreno says:

Dave says:

Vikas KM says:

The Dude says:

Jonathan says:

Mark says:

Karl says:

Marios says:

Mark says:

amine says:

gh says:

oyunlar1 says:

Bradford Sherrill says:

Nick Rougeux says:

Alek Davis says:

haberler says:

Michael Curry says:

John Faulds says:

LOTR says:

Mark says:

Darren says:

Tuscaloosa Web Design says:

Cespur says:

Navrang Panchal says: