Old browser

This article shows off HTML5 features, don't you think it would be a good idea to read it with a browser that supports these features so you can see them?

3D Flipping Button

You may have seen on a few websites some really cool flipping 3D buttons like the one below. Go ahead, click on it!

Dank button

Clicked!

In this article, we'll see how to do this type of button, and how to overcome a CSS limitation to make it responsive.
I will be using the Roboto font, so you might want to download it.
You are free to copy, modify and use this code as you wish.

The buttons shown here scale accordingly to the font-size attribute, and will work in IE10+.

Basic implementation

Since we only need to show 2 sides of the cube (front and top), there's no need to model the entire cube. If you decide to do that, however, be warned that some browsers will not render depth correctly (as of March 2016, Lightning Browser on Android is one of these).

But let's get to the code.

First, we need to define a container. Here we have to put the size of the button explicitly. Due to a current CSS limitation, we cannot use the % unit and make this button easily scalable, but we'll see how to overcome this later.

What a slab of code!
cb_btn will fill the container, and set up the 3D rendering inside it.
The elements inside a cb_btn will have the specified 10x4 size, with a small border. The rest of the code forces the default mouse cursor and disables selection of text inside the button.
Finally, cb_front and cb_top will be used to place 2 divs in their respective positions.
Notice the 1.99em instead of 2em, that's because on some browsers the corners of the cube would not render properly.

And now, a flipped position for the cube.

.cb_btn.cb_flip{transform:translateZ(-2em) rotateX(-90deg);}

The transition we put on cb_btn before will take care of animating it.

A big problem: making it responsive

As I said before, due to a CSS limitation, we cannot easily change the width and height of this button, but only scale it using font-size.
This can be a problem if we want a responsive layout, in which the button has to fill a container, but we can accomplish it with with some JS because the font-size we need is the ratio between the size of the container and the natural size of the button.
So what we need is to wrap our cb_container into something that will fill the available space of the parent, and then a function to calculate the font-size. Let's start with the CSS:

This function can be called on a cb_btn to make it fill the container element. It also adds margins automatically.
However, this is not enough, this function has to be called whenever the container (or the page) is resized!.
So we need a little more JS sorcery:

As you can see: in cb_container, perspective has to be equal to the width; the elements within cb_btn must have the same width and height as the cb_container; and all the translateZ operations must have half the height as parameter.

We're done!

You can download the full example and adapt it to use on your website.