Super Awesome Buttons with CSS3 and RGBA

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

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

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

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

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:

1. /* Sizes ---------- */
2. .small.awesome {
3. font-size: 11px;
4. }
5. .medium.awesome {
6. font-size: 13px;
7. }
8. .large.awesome {
9. font-size: 14px;
10. padding: 8px 14px 9px;
11. }
12.  
13. /* Colors ---------- */
14. .blue.awesome {
15. background-color: #2daebf;
16. }
17. .red.awesome {
18. background-color: #e33100;
19. }
20. .magenta.awesome {
21. background-color: #a9014b;
22. }
23. .orange.awesome {
24. background-color: #ff5c00;
25. }
26. .yellow.awesome {
27. background-color: #ffb515;
28. }

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