Type study: An all CSS button

This is part of a series of guest posts covering tips and tricks for working with fonts on the web. Today’s post was written by Dan Cederholm of SimpleBits.
A few years ago I gave a talk about why a button made a great place to bring in type from a branding element (such as a logo). My point was that if the type in your logo was an image, and stylish buttons were also often images, then why not align the fonts in both to bring some cohesiveness to the typography. This was probably four years ago, and we’ve come a long way since. Now, in certain situations, CSS can replace the inflexible image buttons we used in the past. Add on top of that the advances made in @font-face and you have yourself a powerful combination for creating a wide variety of interface elements that are reusable and will degrade well in older browsers.
The button is also a great place to showcase many of the new CSS3 properties in one place, which is another reason I’m particularly taken with buttons at the moment. Through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create highly polished interface components that don’t require images. Check out the demos from Rogie King and Mark Otto to get a sense of how CSS3 can be used to add dimension to otherwise flat objects.
Let’s build a button, friends.

The markup

I’m going to use a hyperlink in this example, but the styles we’re going to add could just as easily be applied to a

Press this!

Notice the extra element here. Don’t panic; we’ll use that to create an animated effect when pressing the button (more on that later). Trust me, this harmless extra element is worth it.

Adding the styles

Our first step is to add basic styles for background, color, and rounded corners to make this simple little link look more like a button.

.btn span {
  display: inline-block;
  padding: 10px  20px;
  background: #3194c6;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

I’m adding the vendor-prefixed border-radius properties for WebKit and Mozilla browsers, followed by the real, non-prefixed version for future-proofing. I’m also setting display: inline-block; on the link so that we can animate the clicking of the button later on.

Next, let’s hop on over to Typekit and choose a typeface for the button. As I mentioned earlier, buttons are a great place to reintroduce brand type, and with Typekit we can quickly and easily add a custom font here without using an image.
With the classic Cooper Black font chosen, and the simple Typekit scripts in place, I’ll now apply that font to the button style.

.btn span {
  display: inline-block;
  padding: 10px  20px;
  font-family: "cooper-black-std-1", "cooper-black-std-2";
  background: #3194c6;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}


This button is starting to become far more interesting.
For browsers that currently support it (WebKit and Mozilla), I’m going to override the background color with a CSS gradient that runs from the original blue to a slightly lighter blue. This will make the surface of the button appear slightly concave.

.btn span {
  display: inline-block;
  padding: 10px  20px;
  font-family: "cooper-black-std-1", "cooper-black-std-2";
  background: #3194c6;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
  background: -moz-linear-gradient(#3194c6, #5bacd6);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

(I recommend this handy tool to construct your gradient rules.)
Notice that we’ll keep the original solid background color prior to the gradient rules; browsers that don’t yet support CSS gradients will degrade to this solid color.

To make the wonderfully-chunky Cooper Black text look as though it’s sunken into the button a bit, we’ll add a subtle text-shadow with a negative vertical value. That will create a darker shadow just above the text.

.btn span {
  display: inline-block;
  padding: 10px  20px;
  font-family: "cooper-black-std-1", "cooper-black-std-2";
  text-shadow: 0 -1px 1px rgba(19,65,88,.8);
  background: #3194c6;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
  background: -moz-linear-gradient(#3194c6, #5bacd6);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

So far, we’ve been adding styles to that inner inside the hyperlink, but to finish off the styles that will make the button look three-dimensional, we’ll tack on a few rules to the outer element itself.

.btn {
  display: inline-block;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow:
    0 8px 0 #1a74a1,
    0 15px 20px rgba(0,0,0,.35);
  -moz-box-shadow:
    0 8px 0 #1a74a1,
    0 15px 20px rgba(0,0,0,.35);
  box-shadow:
    0 8px 0 #1a74a1,
    0 15px 20px rgba(0,0,0,.35);
}

I’m repeating the inline-block and border-radius rules here to match the . To add dimension, I’m adding two box-shadows: one for the darker blue that creates the bottom portion of the button, and one for the shadow that the button casts on the white background. Multiple box-shadows can be strung together and delimited with commas in a single rule. Notice I’m adding the vendor-prefixed rules for WebKit and Mozilla, followed by the non-prefixed box-shadow property at the end.

And voilà. A three-dimensional button using CSS3, a custom embedded font via Typekit, and zero images. I think a tasty beverage is in order.
But wait, let’s make things even more interesting and enrich the experience here a bit by animating the button when it’s clicked. Again, we’ll lean on CSS3 to do the animating in browsers that support it, while safely degrading in browsers that don’t.
If we add two new declarations for the :active state (as the button is clicked), we can give the illusion that the button has been depressed.

.btn:active {
  -webkit-box-shadow:
    0 8px 0 #1a74a1,
    0 12px 10px rgba(0,0,0,.3);
  -moz-box-shadow:
    0 8px 0 #1a74a1,
    0 12px 10px rgba(0,0,0,.3);
  box-shadow:
    0 8px 0 #1a74a1,
    0 12px 10px rgba(0,0,0,.3);
}

.btn:active span {
  -webkit-transform: translate(0, 4px);
  -moz-transform: translate(0, 4px);
  -o-transform: translate(0, 4px);
  transform: translate(0, 4px);
}

The first declaration adjusts the box-shadow on the element: dimming it slightly and making it less pronounced (since when depressed, the button is shorter and will cast a smaller shadow).
The second declaration applies a translate transition on the inside the . Translate moves an element from its initial position on the page using x and y coordinates. Here, we’re simply moving the surface portion of the button down 4 pixels. The reason we’re using a transform — rather than say position or adjusting margins — is that we can also apply a transition to that transform, smoothing out the move with a bit of animation. Moving the 4 pixels down hides 4 pixels of the darker box shadow on the element and the effect is complete.

Our last step is to add CSS transitions to smooth out both the shadow-dimming and the translate move. We’ll again use the appropriate vendor prefixes for all the capable browsers (WebKit, Mozilla, and Opera), plus the real properties for the future.

.btn {
  display: inline-block;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow:
    0 8px 0 #1a74a1,
    0 15px 20px rgba(0,0,0,.35);
  -moz-box-shadow:
    0 8px 0 #1a74a1,
    0 15px 20px rgba(0,0,0,.35);
  box-shadow:
    0 8px 0 #1a74a1,
    0 15px 20px rgba(0,0,0,.35);
  -webkit-transition: -webkit-box-shadow .2s ease-in-out;
  -moz-transition: -moz-box-shadow .2s ease-in-out;
  -o-transition: -o-box-shadow .2s ease-in-out;
  transition: box-shadow .2s ease-in-out;
}

.btn span {
  display: inline-block;
  padding: 10px  20px;
  font-family: "cooper-black-std-1", "cooper-black-std-2", Helvetica, Arial, sans-serif;
  line-height: 1;
  text-shadow: 0 -1px 1px rgba(19,65,88,.8);
  background: #3194c6;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
  background: -moz-linear-gradient(#3194c6, #5bacd6);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
  -moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
  box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
  -webkit-transition: -webkit-transform .2s ease-in-out;
  -moz-transition: -moz-transform .2s ease-in-out;
  -o-transition: -o-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}

Notice I’ve added two transition stacks here: one on the element, which transitions the subtle shadow change, and one on the element which smooths out the translate transform, making the button push a bit more realistic.
Check out the demo to see it in action! And next time you need to make a button, remember that it’s a great place to use CSS3 and web fonts. Go make a button that can’t wait to be pushed.