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

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+.

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.

Our button will be 10em by 4em in size, and will scale accordingly to the font-size attribute. We'll see how to change that later.
Do not change the font-size in this container! We'll see why later.

Now, we'll define the actual cube and 2 faces

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.

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

And finally, the HTML

And we get something that looks like this (click on it):

Let's put some text into the button. First, we'll define the style:

And now the new HTML:

And we get something that looks like this (click on it):

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:

The new HTML:

And finally, the JS magic:

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:

At this point you might understand why I said before that the font-size must be applied to your container instead of the button itself, it's because it would make this calculation fail :)

And we get something that looks like this. Here I make it fill a rectangle up to 6em in height. A border is shown so you can see how it resizes.

Our button has a fixed 10x4 size, but we can change that by redefining some CSS classes. Here we have a 15x3 button. The lines in bold are the ones that were changed.

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.

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