Subscribe via RSS

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

109 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
Java developer says:

Very informative. Thnx

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?

Latest Tweet

Amazing day snorkeling and snuba diving on Maui- this picture of Dmitry pretty much sums up the day: http://bit.ly/cePfMu

About.com - Eric reviews Notable "Managing the Web Design Process with Notable"
So neat to see Notable on About.com's Graphic Design blog today! Great overview and review of the app by Eric Miller of Eric Millers Design.
Brian Wong's five minute video demo of his excitement behind Notable
A amazingly detailed five minute video demo by Brian on all of the features of Notable. We did not expect an excited user to go so far as to create a detailed video demo. This is over the top!
OStatic GigaOM: ZURB - Design Strategy Company Gives Ruby on Rails High Marks
Great Q & A with Matt Kelly our "Nerd Lead" on how we developed Notable.

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 109 Comments

The Button

Making it Scale with RGBA

Adding the Colors and Sizes

Done Deal

Like this post? Share it!

Notable

109 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: