Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Pushing Your Buttons With Practical CSS3

CSS3 is the partially implemented sequel to the CSS2 spec we all know and love. It’s already popping up in new browsers such as Firefox 3.5, Safari 4 and Chrome. In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons.

Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. In the past, really awesome buttons needed extra markup, sliding doors or other trickery. We’ll show you here how to create nice button styles without any hacks or cheats.

Step 1: The Super-Awesome Button Link

Some time ago we published a post titled “Super Awesome Buttons with CSS3 and RGBa1.” Those buttons will be our first step to creating buttons that really click. We will briefly review the technique and then extend it, fixing the problems that we have encountered along the way.

Using Box-Shadow and RGBa Link

Our first goal when we were about to create a versatile family of buttons was to eliminate the problem that HEX-based drop-shadows have on different backgrounds. As you can see below, we can use box-shadow to create a drop-shadow, but the shadow color doesn’t work on both dark and light backgrounds. To get around that, we used a color model that is available in new browsers: RGBa.

Screenshot

RGBa works like the standard RGB model — 255, 255, 255 for white, for example — but has a fourth property that controls the alpha, or transparency, channel. In the buttons above, the gray shadow that we created for the white background is much too light against the dark background. However, using RGBa we can create a black shadow that is transparent. This allows the shadow to work against any kind of background:

Screenshot

button.awesome, .button.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);
	…
}

That solves our box-shadow problems. All that’s left is a dash of CSS properties and a simple PNG overlay to create a finished button that can be restyled with any color, on any background, and that will work just fine.

The Amazing Border-Radius Link

Creating objects with rounded edges has always been a mess on the Web; after all, every object on the Web is a rectangle. CSS3 makes our lives a little easier by implementing an incredibly easy way to round off objects without sliding doors or obnoxious background elements. With these buttons, we’re using a standard background color and a PNG overlay to give them depth. We are not using a background image to round the edges.

button.awesome, .button.awesome {
	…
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	…
}

Currently, Webkit (Safari, Chrome) and Firefox have slightly different implementations of border-radius. Webkit will round off functional elements (like images), while Firefox will not. However, both will very cleanly round off an object and mask the background image, color or both (as with our buttons).

If you get in close, you can see that the borders behave a little strangely at the pixel level, but for the most part border-radius is a great way to bring rounded edges into your design without the mess. Here’s the complete CSS for these buttons:

button.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 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);
	position: relative;
	cursor: pointer;
	…
}

Final Touches Link

We’ve created the standard buttons you can see above, but another great thing about buttons that don’t use images is that we can create any color we want and with some simple class names generate an entire repertoire of buttons that we can call on any time. This is great for creating a reusable set of buttons that can be adapted to your or your clients’ style guide. Check out the color codes that we are using:

.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;
}

These simple classes allow us to quickly call on the button we want to get the action we need users to take. We’ve used similar methods in the buttons we’ll walk through in the next few sections.

Our last step is sizing. Without a sliding-doors situation our button size is only limited by the size of our overlay image (and in future buttons, not even by that). We’ll use a few classes (small, medium and large) to create sizes that we can call in different situations.

Screenshot2
The buttons in various sizes: an overview.

And that’s it! A scalable, easily configured set of buttons that works in all browsers (through graceful degradation) and will get you the impact you want. In the next few sections we’ll build on these buttons to show you how CSS3 can push these even further in some interesting directions.

Screenshot3

See the live demo »4 Link

We’ve created a live demo page for these buttons; it’s in a playground, where we create small side projects and cool toys. We’ll be linking to the playground examples throughout this post and the rest of our series.

A note about compatibility: true to form, IE8 does not support border-radius. At ZURB, we’ve adopted a “graceful degradation” paradigm, so these corners will be square in IE. In our experience, the additional development cost for elements like this is not worth it, and we rely on these properties to cleanly degrade and not damage the layout or readability. These buttons are no exception: they are still as clickable in IE as anywhere else, just not quite as pretty.

Step 2: Radioactive Buttons Link

Now that we’ve gotten our feet wet with CSS3, let’s go in a different direction. For a recent client project, we wanted to create a stylized, attractive and eye-catching call to action for the home page. We came up with the idea of a radioactive button, a button that actually pulses on the page for more attention.

Screenshot5

Kitschy? Maybe a little. But despite its impracticality, for some websites and clients, the “Wow” factor—that feeling the user gets when they arrive at a website and say, “Oooh, ahhh!”—can’t be ignored. Where we only used to have , thanks to some tricks we’ve already covered (and one we haven’t), we can move beyond that terrifically obnoxious blink tag and explore a whole new range of opportunities to animate using pure CSS.

Animation: No JavaScript Required Link

The secret to the radioactive button is in a new CSS3 property called animation (or, as it currently exists, -webkit-animation and -moz-animation). Our radioactive buttons are structurally and stylistically identical to the buttons in step 1, but with one important change. In lieu of a static drop-shadow, we’ve used the box-shadow property to create a glow around the button. With “glowing shadow” added, the next step is to use CSS3 animation to dim and brighten it.

Creating the Animation Link

The first step in our radioactive awesomeness is to create a timed event that modifies existing CSS properties. Check out this odd-looking property:

@-webkit-keyframes greenPulse
{
	from {
		background-color: #749a02;
		-webkit-box-shadow: 0 0 9px #333;
	}
	50% {
		background-color: #91bd09;
		-webkit-box-shadow: 0 0 18px #91bd09;
	}
	to {
		background-color: #749a02;
		-webkit-box-shadow: 0 0 9px #333;
	}
}

Here’s how the code works:

  • @-webkit-keyframes tells the browser that we’re defining an animation based on keyframes, or points in the animation to where properties will change. The browser then knows to smoothly transition between those frames.
  • greenPulse is the name of the animation. We need this to attach to objects later on.
  • from { … } defines the starting point of the animation; in our case, a certain background color for the button and a box-shadow color (particularly, one that disappears into the background).
  • 50% { … } means that one change happens halfway through the animation.
  • to { … } defines the last frame of the animation. Note that animations always return to their from state—they don’t stop on the last frame. This means that a smooth animation needs to begin and end with the same properties and values.

All right, we’ve created the animation. It takes an object and over a set time changes the box-shadow color to green and then back to gray. Now, we just have to make it active by applying the animation to our buttons.

.green.button {
	…
	-webkit-animation-name: greenPulse
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	…
}

Pretty cool, isn’t it? -webkit-animation has many potential uses and, when combined with some very simple JavaScript (like onclick), you can create very rich effects and interaction without resorting to a JavaScript effects library.

Screenshot6

See the live demo »7 Link

Check out the live demo of radioactive buttons in our playground. For maximum awesomeness, check it out in Safari 4; radioactive buttons use some Webkit-specific properties that aren’t implemented well in Chrome quite yet.

Nice, Simple, User-Friendly Buttons, Google-Style Link

Our last example was inspired by some recent changes made to one of the most trafficked pages on the Web: the Google search page. In addition to enlarging the search field and text size, Google also rolled out some new buttons for Webkit-based browsers (notably its own, Chrome).

These buttons incorporate everything that makes our buttons in this article great, with one cool trick: no images at all. Google has used a new property called -webkit-gradient to generate a gradient using only CSS.

Screenshot8

Using CSS Gradients Link

Gradients in CSS are cool because they are a CSS function, much like url(), which means that we can use gradients anywhere images go, including in the background or in borders (don’t worry, we’ll get to border-image in a later post). Here’s how gradients work:

.g-button {
	…
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(98,202,227)));
	…
}

Let’s break this down:

  • linear means this is a linear gradient, as opposed to radial. This changes the color across a single axis, rather than in concentric circles.
  • 0% 0%, 0% 100% are coordinates. We’re saying that the gradient begins at 0% X, 0% Y and ends at 0% X, 100% Y: top-left corner to bottom-left corner. We could use top-left, bottom-left just as well.
  • from(rgb(255, 255, 255)) is the starting color for the gradient. If the syntax looks familiar, it should be: it’s very similar to the syntax for @-webkit-keyframes.
  • to(rgb(221, 221, 221)) is the ending color. While we have only used RGB here, you can see how gradients could get really interesting if we use RGBa and are able to control the opacity of points on the gradient.

The rest of the button is ordinary: padding, border-radius and all the fun things we’ve gone over so far. Gradients is the star here, though, and it has thousands of potential uses. Here, we’ve created (albeit in Google’s footsteps) rich, engaging buttons that are 100% CSS, no images required.

Screenshot9

See the live demo »10 Link

You can see a live demo of these buttons in the playground, or simply visit the Google search home page in a Webkit browser.

Coming Up: Better, Stronger, Faster Design Link

This is the first of the articles that take advantages of the powerful new features coming in CSS 3. In the following posts, we’ll show you how CSS3 not only can make implementation faster and easier, but can help you really fly off the rails and push CSS to its breaking point while creating impressive visual effects.

References and Resources Link

(al)

Footnotes Link

  1. 1 http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
  2. 2 http://www.zurb.com/playground/super-awesome-buttons
  3. 3 http://www.zurb.com/playground/super-awesome-buttons
  4. 4 http://www.zurb.com/playground/super-awesome-buttons
  5. 5 http://www.zurb.com/playground/radioactive-buttons
  6. 6 http://www.zurb.com/playground/radioactive-buttons
  7. 7 http://www.zurb.com/playground/radioactive-buttons
  8. 8 http://www.zurb.com/playground/google-buttons
  9. 9 http://www.zurb.com/playground/google-buttons
  10. 10 http://www.zurb.com/playground/google-buttons
  11. 11 http://answers.polldaddy.com/poll/2330515/
  12. 12 http://answers.polldaddy.com
  13. 13 http://css-tricks.com/rgba-browser-support/
  14. 14 http://webkit.org/blog/138/css-animation/
  15. 15 http://www.zurb.com/article/221/css3-animation-will-rock-your-world
  16. 16 http://www.css3.info/webkit-introduce-more-new-features/
  17. 17 http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction/Introduction.html
  18. 18 http://www.the-art-of-web.com/css/border-radius/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

ZURB is a close-knit team of interaction designers and strategists that help companies design better products & services through consulting, products, education, books, training and events. Since 1998 ZURB has helped over 75+ clients including: Facebook, eBay, NYSE, Yahoo, Zazzle, Playlist, Britney Spears, among others.

  1. 1

    Super Awesome.

    0
  2. 2

    YEY! That’s a great way to design. Clean and simple!

    0
  3. 3

    Love it – cannot wait to start using them when CSS3 has higher cross-browser support.

    0
  4. 4

    Brandon Mathis

    December 2, 2009 7:33 am

    You should check out the Fancy Buttons Compass plugin. You can get even nicer buttons with less work. Also they degrade nicely for older browsers!

    Demo & Screencast:
    http://brandonmathis.com/projects/fancy-buttons/

    0
  5. 5

    Edmundo Junior

    December 2, 2009 7:33 am

    I love ZURB playground :D

    0
  6. 6

    Some awesome techniques used. Very helpful, cannot wait until EVERY browser supports this stuff. Though not the glowing stuff. I can see over use of that and I can see that it might become something of an annoyance, much like scrolling text or blinking text.

    0
  7. 7

    Julia Altermann

    December 2, 2009 7:38 am

    Very nice tut. I just wish I would not have to compensate for IE, would make implementing these functionalities so much more fun.

    0
  8. 8

    Instead of animation, we can use transition (or -webkit-transition, -moz-transition) to make nice hover effect.
    For the gradient, we have also -moz-linear-gradient (which have a better syntaxe according to futur implementation into CSS3)
    Note the for some specific properties (-moz or -webkit) we should also use the syntaxe whitout the “-specific prefix” to make it compatible in the futur :)

    0
  9. 9

    This is a great article, except for the fact that I had to load Safari.

    0
  10. 10

    That’s awesome! I wish CSS3 was a standard on every browser right now, because I’d love to start using these techniques on everything.

    0
  11. 11

    Dimi Arhontidis

    December 2, 2009 8:12 am

    What is the CSS3 reach so far?

    0
  12. 12

    63% of people are really going to appreciate the work you put into your cool buttons. However, 37% of people are going to wonder why your website looks bad.
    Buttons are just too important not to use images for. Unless less people use IE suddenly (I wish).

    Of course you could spoon feed IE some images for better buttons but that sounds like a lot of unnecessary work.

    0
  13. 13

    Blue Sail Creative

    December 2, 2009 8:27 am

    We have begun to adopt CSS3 onto our Web site at bluesailcreative.com , did some cool stuff with the project detail page.

    Would love others opinions.

    0
  14. 14

    Miguel Palazzo

    December 2, 2009 8:36 am

    Great compilation!

    Damn IE users! I’ve been using some CSS3 already and oh well, IE users can keep on looking at those plain buttons, I won’t mind about them. So much goodness for the rest of us woohoo!

    0
  15. 15

    Love CSS3 new features ;)
    Thx for this great post !

    0
  16. 16

    This is so exciting! I’ve been implementing CSS3 in my own projects. These new CSS3 properties save so much time and effort! Can’t wait til all browsers fully support it.

    1
  17. 17

    David Ferguson

    December 2, 2009 8:45 am

    old… saw this a long time ago…

    0
  18. 18

    How do these roll back in older browsers? That’s be interesting to know.

    0
  19. 19

    I have already started using CSS3 but only on certain sites and for certain elements. That’s the great thing about web design; we have many, many tools and we can use any one of them whenever the client allows us.

    Yes IE sucks big time but that doesn’t mean you ignore these techniques because sites will come along where they would fit in perfectly.

    0
  20. 20

    Brilliant!

    Just in time for a new project I’m working on!

    Thanks

    0

↑ Back to top