Super Awesome Buttons with CSS3 and RGBA

Posted: April 15, 2010 in Design
Tags: , ,

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:

  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.

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.

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

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. /* Colors ———- */
  13. .blue.awesome {
  14. background-color: #2daebf;
  15. }
  16. .red.awesome {
  17. background-color: #e33100;
  18. }
  19. .magenta.awesome {
  20. background-color: #a9014b;
  21. }
  22. .orange.awesome {
  23. background-color: #ff5c00;
  24. }
  25. .yellow.awesome {
  26. background-color: #ffb515;
  27. }

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.

  1. […] Super Awesome Buttons with CSS3 and RGBA « R@j@. R.K […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s