Sexy CSS Buttons

CSS is getting quite powerful these days. It can even take the place of images in many ways, giving you a more flexible design and fewer files to work with. Imagine being able to make an ultra sexy button with just CSS, giving you complete control through code. Well, you can! And it’s not too difficult, really. Below you can see some buttons I styled using only CSS:

Sexy, yes? These employ a couple of useful CSS properties. Most importantly are gradients, for which we use -webkit-gradient and -moz-linear-gradient. Secondly, we use border-radius and -moz-border-radius to make the button round. For a bit of added depth and eye candy, I have added a subtle drop black dropshadow above the text using text-shadow and around the whole button using -webkit-box-shadow, -moz-box-shadow, and box-shadow.

You may have noticed a lot of “webkit” or “moz” above. Everything used to create these buttons works in both Webkit browsers as well as Mozilla browsers—they just work a little differently. Internet Explorer does not have any of the functionality required to make a button like this, and Opera lacks quite a few things as well. It degrades fairly well in Opera (as it still has border-radius), and Internet Explorer users get a solid gray rectangle with a black border. So what does this mean for us as developers? Well, it’s not something we can rely on in the wild—but it works perfectly for those targetting Mozilla or Webkit users.

Alright, now let’s start looking at some code. Of course, we’ll create our button as usual: <input type=”button” value=”Cancel” />. To style all inputs with the type of “button” as well as the button element, we can use the CSS selector input[type=button], button.

We’ll start by changing our button’s outline and radius. We need to set the outline-width to 0 to avoid Webkit drawing an ugly border around it when focused. Because there is no outline-radius property, Webkit draws a rectangular border on focused elements. We set border-radius and -moz-border-radius to 50px, which will make our buttons as round as possible up to a height of 50 pixels.

outline-width: 0;
border: 1px solid #000;
border-radius: 50px;
-moz-border-radius: 50px;

Now let’s set up the drop shadow for the whole button. We need one line for Webkit, one for Mozilla, and the real CSS3 property, which is used by Opera:

-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

And now to make the buttons really sexy: add the gradient. These differ a little between browsers. We need to specify to -webkit-gradient that we are using a linear gradient. For Mozilla, we specify that we want a linear gradient by using -moz-linear-gradient. Then we specify the angle (for instance, from the top left to the bottom left). Webkit’s color-stops are backwards from Mozilla’s colors (which require no extra function). Mozilla can also use pixel values or percentages, whereas Webkit can only use percentages.

background-image: -webkit-gradient(linear,
    left top, left bottom,
    color-stop(0.0, rgba(255, 255, 255, 0.8)),
    color-stop(0.01, rgba(255, 255, 255, 0.6)),
    color-stop(0.4, rgba(255, 255, 255, 0.3)),
    color-stop(0.4, rgba(255, 255, 255, 0.2)),
    color-stop(1.0, rgba(255, 255, 255, 0.0)));
background-image: -moz-linear-gradient(top,
    rgba(255, 255, 255, 1.0) 0%,
    rgba(255, 255, 255, 0.6) 1px,
    rgba(255, 255, 255, 0.3) 40%,
    rgba(255, 255, 255, 0.2) 40%,
    rgba(255, 255, 255, 0.0) 100%);

It is important to note that CSS gradients act as an image—in this case, the background image. The leverage to this design comes from the fact that we use RGBA colors; that is, no part of the gradient is fully opaque, and thus the color underneath can shine through. This is very important when using Webkit transitions, as you cannot transition from one gradient to another—but you can transition from one background color to another.

It is possible to specify an inner drop shadow which will act as the shiny highlight, rather than specify it in the gradient. This works in Mozilla and Opera; the odd man out in this case is Webkit, as there is a bug preventing it from rendering correctly. You can add another line to -moz-box-shadow and box-shadow to get the effect:

-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9),
    inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9),
    inset 0px 1px 0px rgba(255, 255, 255, 0.5);

Now we just need to set up the initial background color, text color, and the text drop shadow:

background-color: #444;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;

So, now we have a styled sexy button. But it doesn’t quite act like a button yet. We need to add some styling for when the button is hovered, focused and clicked.

To add a bit more eye candy, we can use Webkit transitions to ease between the states. Add this -webkit-transition to the button’s normal CSS mode to ease between the background color, text color, and drop shadow:

-webkit-transition: background 0.2s ease-in-out,
    color 0.2s ease-in-out,
    -webkit-box-shadow 0.2s ease-in-out;

To style the hover and focus states, we will use the selector input[type=button]:hover, input[type=button]:focus, button:hover, button:focus. This ensures that we can style the button for those who use the mouse as well as for keyboard navigators. Fortunately, most of the inherited styles will still apply to the hover state. All we need to do is change a few key properties. Here I darken the drop shadow and lighten the background color:

-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
background-color: #666;

For the click state, we use the input[type=button]:active, button:active selector. Like with the hover state, we just need to change a few things. Here I darken the background and text and change the transition to be instantaneous:

background-color: #222;
color: #ccc;
-webkit-transition-duration: 0.0s;

So, now we have a completely functional sexy button, all created with CSS! Play around with the settings to create a button which fits your style. Check out the Sexy Buttons page in my Experiments to see them in action!

Update: I have added Mozilla and Opera transitions to the buttons.  You can read more about the code changes in the update post.