Create a Simple Faux-3D CSS Button

CSS has come a long way. It really handles creating some super nice effects without the need for additional imagery. With the rise in mobile use and the introduction of new retina displays all the time, it’s important to take a look at what is being created with pure CSS and what is still using raster imagery. Because CSS effects are vector-based, they use very little file size (a performance boost) and scale incredibly well (for high-resolution displays).

One of the hottest new trends is incorporating 3D in CSS styles. While true 3D is a bit more complicated, I wanted to whet your appetite with a quick faux-3D button that is made entirely of HTML and CSS!

See the Final Product on CodePen (Demo)

The HTML

The HTML code on this one is super easy. You could apply this to all anchor tags, a specific class on a tag, or any number of other ideas. For demonstration purposes, I’ve kept things really simple.

HTML

<a href="#">It's a cool 3D button!</a>

That won’t get you much more than a standard link, but that’s all we’ll need for now.

The CSS (aka: The Good Stuff)

The CSS is where the real magic will take place. For the full effect, we’re going to style the link and its hover state, but we’ll look at the hover later.

Let’s get started by making our button look 3D!

CSS

a {
  display: inline-block;
  background-color: #1984c3;
  color: #fff;
  font-size: 1.5em;
  font-family: Courier, sans-serif;
  padding: 1em 5em;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 0.5em;
  border-bottom: 0.25em solid #0f5177;
  box-shadow: 0 2px 3px #ccc;
}

At this point, you should have a pretty nice, blue button. You could so all sorts of things to it, like apply a CSS gradient background or make it a big square, but we’ll start with this. In fact, the hard part is done!

To really sell the effect, we’re going to want to write a bit of CSS for the hover state. Let’s do that now.

The Button’s Hover State

To make this work the way we want to, we’ll have to add a couple more attributes to the main anchor. Namely, these are a transition and a position of “relative”. These will help with the fluidity of the effect and allow us to shift the button in a realistic way.

Here’s what we need to add:

CSS

a {
  -moz-transition: 0.1s;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  box-shadow: 0 2px 3px #ccc;
  position: relative;
}

Of course, we don’t want to create 2 separate sections in our CSS for one element, so here is the final product for our anchor tag:

CSS

a {
  display: inline-block;
  background-color: #1984c3;
  color: #fff;
  font-size: 1.5em;
  font-family: Courier, sans-serif;
  padding: 1em 5em;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 0.5em;
  border-bottom: 0.25em solid #0f5177;
  -moz-transition: 0.1s;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  box-shadow: 0 2px 3px #ccc;
  position: relative;
}

Note that I’ve used vendor prefixes for the transition for Mozilla and Chrome to help with browser support for the time being.

Now the hover state:

CSS

a:hover {
  background-color: #1e9feb;
  border-bottom-width: 0;
  top: 0.2em;
}

That’s really all there is to it! It’s a bit hard to demonstrate the transition, but the hovered state should look something like this:

Final Code and Demo

For those of you that may have skipped to the end, here is the entire final CSS code.

CSS

a {
  display: inline-block;
  background-color: #1984c3;
  color: #fff;
  font-size: 1.5em;
  font-family: Courier, sans-serif;
  padding: 1em 5em;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 0.5em;
  border-bottom: 0.25em solid #0f5177;
  -moz-transition: 0.1s;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  box-shadow: 0 2px 3px #ccc;
  position: relative;
}

a:hover {
  background-color: #1e9feb;
  border-bottom-width: 0;
  top: 0.2em;
}

And to demonstrate our new button in action, here is a cool demo, embedded from CodePen!