How to make my buttons responsive?

Question

I've a little problem with my buttons : http://jsfiddle.net/2B9XB/

Here is the css :

.button {
  background-color: #53a1b8;
  border: none;
  border-bottom: 2px solid #3f8194;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 1.1em;
  height: 3em;
  padding: .5em 2em .5em 2em; 
}

.button:hover {
  background-color: #5eb6d0;
  border-bottom: 2px solid #53a1b8;
  color: #fff;
 }

As you can see, there is a responsive problem, but i didn't find how to fix it. I want to prevent the buttons on the bottom to hide those on the top.

Have you any idea ?

thanks, Vinm.

Answer 1

FIX :

Add display:inline-block; and remove height:3em; on .button

FIDDLE