Make CSS3 Buttons Like A Bawse

Shout out to Rick Ross for his pronunciation because “bawse” > “boss.”

What Mazzola’s CSS3 buttons look like in Opera 11.10.

In January, Chad Mazzola posted a Thoughtbot article titled Make CSS3 buttons like a boss (via nico604). It is a great read for designers, but it does have one glaring omission: no Opera support.* (I know right? Who does that?)

So let’s improve Mazzola’s code to add Opera support and use standard, prefix-less properties where we can.

Opera and Linear gradients

As Mazzola points out, the light source for these buttons is coming from overhead, giving highlights at the top edge, but darkness and shadows at the bottom. He starts with linear gradients for Firefox and Safari/Chrome.

button {
  background: #3b88d8;
  background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
}

We will add a linear gradient style for Opera.

button {
  background: #3b88d8;
  background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
  background: -o-linear-gradient(90deg, #377ad0 0%, #52a8e8 100%);
}

Note that Opera’s syntax is different from that of WebKit’s or Firefox‘s implementation. It’s closer to the current version of the specification. Since this is a simple gradient, we could also use a simpler syntax for Opera: -o-linear-gradient(#377ad0, #52a8e8). Read more about linear gradients in Opera.

The syntax for borders is the same in Opera as it is in Firefox, Internet Explorer, Safari and Chrome. We can skip that section. But we can adjust Mazzola’s box-shadow styles to reflect current browser support.

Browsers have pretty much standardized their implementations of box-shadow. The appearance varies slightly, but the syntax is the same. That means this code:

button {
  -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
}

can become:

button {
  box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
}

The above works in the latest versions of all major browsers, including Internet Explorer 9. If you’d like, you can retain the -moz- and -webkit- prefixes for older versions of those browsers.

Now let’s look at the styles for the :hover state. Here, Mazzola has applied a linear gradient and a box shadow. Again we will add a gradient for Opera and change the prefixed box-shadow properties to use the unprefixed ones. For future-compatibility, let’s also add an unprefixed, spec-compliant linear-gradient (which we can also do above).

button:hover {
  background: #2a81d7;
  background: -moz-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb));
  background: -o-linear-gradient(#206bcb, #3e9ee5); /* using the simpler syntax */
  background: linear-gradient(#206bcb, #3e9ee5);
  border-top: 1px solid #2a73a6;
  border-right: 1px solid #165899;
  border-bottom: 1px solid #07428f;
  border-left: 1px solid #165899;
  box-shadow: inset 0 1px 0 0 #62b1e9;
  cursor: pointer;
  text-shadow: 0 -1px 1px #1d62ab;
}

Repeat these replacements for the button[disabled] state.

Though Internet Explorer 9 doesn’t support CSS gradients, you could use an SVG gradient as a background image. You can also use a bitmap image file for older versions of all browsers.

And that’s how to make CSS3 buttons like a boss.

*To be fair: Opera didn’t support linear gradients at the time. Support was added in Opera 11.10, released in March 2011. But Opera did support for prefix-less versions of box-shadow and background-clip. You do not, however, need to use background-clip to make these buttons work in Opera.