html - 如何让我的按钮响应？

Question

我的按钮有点问题:http://jsfiddle.net/2B9XB/

这是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;
 }

如您所见，存在响应问题，但我没有找到解决方法。我想阻止底部的按钮隐藏顶部的按钮。

你有什么想法吗？

谢谢， Vim 。

Answer 1

修复:

在 .button 上添加 display:inline-block; 并删除 height:3em;

FIDDLE