Pushing Your Buttons With Practical CSS3

Step 1: The Super-Awesome Button

Some time ago we published a post titled “Super Awesome Buttons with CSS3 and RGBa.” 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

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.

Buttons-1 in Pushing Your Buttons With Practical CSS3

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:

Buttons-2 in Pushing Your Buttons With Practical CSS3

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

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

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.

Various-buttons in Pushing Your Buttons With Practical CSS3
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.

Super-awesome-buttons in Pushing Your Buttons With Practical CSS3
See the live demo »

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

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.

Radioactive-buttons in Pushing Your Buttons With Practical CSS3

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

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

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.

Radioactive-buttons in Pushing Your Buttons With Practical CSS3
See the live demo »

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

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.

Google-buttons in Pushing Your Buttons With Practical CSS3

Using CSS Gradients

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.

Google-buttons in Pushing Your Buttons With Practical CSS3
See the live demo »

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

31 Comments to “Pushing Your Buttons With Practical CSS3”

  • Matthew C. Kriner May 23, 2010 at 2:27 pm

    Thanks for all information which you gave us. Its very usefull. I ll come back For sure. So see you soon!!!

  • Jason Witte May 24, 2010 at 1:32 am

    Nice! Thanks for making my morning a little bit better with this great article!! 😀

  • Andrew A. Sailer May 26, 2010 at 5:05 am

    Thanks for all information which you gave us. Its very usefull. I ll come back For sure. So see you soon!!!

  • December 3, 2011 at 4:33 am

    I truly enjoy reading through on this web site, it has got great content.

  • Markus December 5, 2011 at 7:45 am

    Nice page, We are browsing back again frequent looking for refreshes.

  • online shopping h&m March 3, 2012 at 9:22 am

    I think that everything wrote was very logical. However, what about this? what if you added a little information? I am not saying your information isn’t solid, but what if you added a headline that grabbed a person’s attention? I mean Pushing Your Buttons With Practical CSS3 Web Designer Om Net Solution is kinda boring. You should glance at Yahoo’s front page and watch how they create news titles to get viewers to open the links. You might try adding a video or a pic or two to get people excited about what you’ve written. Just my opinion, it would make your website a little livelier.

  • Jerosh Nagulachandran August 12, 2013 at 11:10 pm

    Ok, I have a forum that has a Javascript Background color changer on it (where users can pick what color of background they want). But whenever they pick a background, then go to a differnt page, they have to pick the background all over again. Is there anyway to keep the background how the user picks it?
    If anyone could give me a code, or make mine into one, it would be helpful. my code it:

    Dark Red
    Dark Green
    Dark Blue
    Dark Cyan

  • Boo Cookie August 16, 2013 at 6:57 pm

    I have applied a background color on my text and then I had clicked on something and I don’t know how to go back on applying the background. Actually, it is my first time in photoshop CS3 and it would be better if I could get a little help. Thanks!

  • Austin August 22, 2013 at 7:58 am

    I need help on changing tho background color on my myspace profile. I have the layout and everything but there’s a big old white box Where my comments, about me and my friends sections are. How can i change that?

  • Nick August 22, 2013 at 7:58 am

    Im using adobe flash cs3 and whenever I try printing my project, the background color always shows up as white and not what I set it to. Is there anyway to fix this?

  • Random August 23, 2013 at 11:22 am

    I don’t know the code that will change all the box background colors and add a border. Help me please!

  • Dana G September 4, 2013 at 3:02 am

    I know you can go under Customize – Appearance, but it doesn’t have the option for me to change the background color. How do, or what is the code for me to be able to put my own background color on there? I want it black.

  • arronwrath September 4, 2013 at 3:03 am

    how do you change the color of it or to a design or something.?
    and dont say this code: because i’ve tries it a million times and it doesnt work on mine.
    none of them do. !

  • happyha31 September 6, 2013 at 4:13 pm

    For my website, I would like to make a Background color changer that remembers your computer, and changes to your selected colors. I would like to do this for my background, and for my table (yeah, no CSS), and I would like it to work for all pages.

  • clntvrrt September 6, 2013 at 9:22 pm

    I need to paint a Vibrant purple vase, what is the appropriate background color for it?

    Thank you very much!

  • wwwavid360gamercom September 8, 2013 at 9:05 am

    My send email (classic or new) is set with a pink background. I’ve tried everything I know to change it to stationary or another background color. The changes won’t stay. It always reverts back to the pink background?

  • heavenly sword September 9, 2013 at 4:20 pm

    I have a simple jpg and it has a white background. I need the background color to be F2F7F9. I won Adobe Photoshop elements but I am not very good with it. Thanks.

  • kevindiking67verizonnet September 11, 2013 at 10:27 am

    For example, I want my background color on a webpage to go from peacock blue to lagoon blue-green from left to right. How do I do this?

  • stephen m September 23, 2013 at 11:41 am

    When I copy something off of the internet that has a background color it puts that background color into word and it won’t let me change it. How do I get rid of that?
    I figured out how to do it before each time I paste but I want to know how to do it permanentlyy. It used to do it but now it doesn’t.

  • Big Banger September 30, 2013 at 11:36 pm

    What is the command to add a background color to an HTML document? Also the command for a background image?

  • zaclo October 3, 2013 at 10:12 pm

    I have a column named SUM, where I add some numbers. I want the cells in this column to have yellow background color. I also want the numbers that are below 100 to be written with red letter but WITHOUT changing the background color.
    I use conditional formatting, but when the number is below 100 the background color switches to default.

    How to fix that?

  • Derek October 10, 2013 at 6:56 pm

    I am 14 and I would really like to learn how to program. I have used sites like Codecademy and Treehouse, but they haven’t really taught me much besides the basics. I want to learn HTML5, CSS3, Javascript, PHP, C++ and Java. I already know the basics of HTML, CSS, Javascript, and Java (not C++ or PHP), but I want to learn them so that I would be able to build professional websites or software. I don’t care about how long it will take me, I am prepared to dedicate years to mastering these languages. I am also prepared to spend as much money as it takes. My parents are really supportive of me learning to programming so they will let me take classes or buy books or anything. Thanks for any help!

  • Dom L October 11, 2013 at 2:53 pm

    I am building a web store. I want something professional looking and aesthically pleasing, but I also want to use a background color or pattern that puts people in the shopping mood. Any suggestions on background patterns and or colors?

  • nick s October 12, 2013 at 3:16 pm

    My Dreamweaver web site has 2 frames (left and right). In the right frame, I use lots of thumbnail links to pictures, and have the target as _self to load in the right frame. Is there an easy way to keep the right frame background color instead of white when the big picture loads? After I did a search, I found some articles about using iframes but this will really be time consuming because I have 100’s of links.

  • Hayden October 13, 2013 at 6:18 am

    I know how to change the font color, size, and the font, but sometimes when you use a light color you can not see it….like the color pink or yellow. So how do you change the background color?

  • balinderk2000 October 24, 2013 at 8:40 pm

    This has bugged me for years..I can’t read the text in my toolbar because the background color is too bright and the text is blurry.I tried personas …but that does nothing for the text background color.
    I am going crazy tying to find an answer for this problem.

  • EzioAuditore1459 October 25, 2013 at 8:37 am

    I have them both as the same color, in Photoshop for the image and in my code for the webpage background color, however they do not match in my preview. I want it to look like my image is just floating on the page, but I have a distinct box around since the color is not consistent. Any help would be much appreciated.

  • krow147 October 25, 2013 at 7:14 pm

    How can I make the background-color after having added a background-image to take the whole page vertically without leaving any space on the top and bottom. How can I do this?

  • whites are not the only racists October 27, 2013 at 10:19 pm

    How can a background color markedly affect the way a surrounded color appear? How can the hue of a background color affect the apparent hue of a surrounded color? How can the value of a background color affect the apparent value of a surrounded color? And how can the saturation of a background color affect the apparent saturation of a surrounded color?

  • Rassling Fundamentals November 17, 2013 at 5:30 am

    Is there a way to permanently set the default page/background color in Word 2007 from white to something else (darker)? I know you can change it on a per document basis – how do i make this change permanent so that every time I open Word I have a blank page with say a grey background?

  • seo February 7, 2014 at 11:44 am

    I’m truly enjoying the design and layout of your website.
    It’s a very easy on the eyes which makes it much more enjoyable for me to
    come here and visit more often. Did you hire out a designer to create your theme?

    Great work!