如何在CSS中设置此按钮的样式以显示下推？

Question

按钮具有这些基本样式，使其看起来像平面外观的3D。

background-color: #7a7acc;
border: none;
border-radius: 10px;
box-shadow: 0px 4px 0px #4747b2;
color: #fff;
font-family: Lato;
font-size: 16pt;
font-weight: bold;
height: 36px;

除了上面的内容之外，我怎么能让它像box-shadow现在一样显示下来？我考虑使用-4px而不是4px，但这并没有将按钮向下移动4个像素。我该怎么做呢？我还必须将文本向下移动4个像素。

Answer 1

如果你想在按下按钮时按下按钮

添加并激活psuedo类，然后position relative，然后向其中添加top:#px

.btn:active{
position:relative;
top:4px;
}

这是一个演示http://jsfiddle.net/p5w4x/

Answer 2

如果想要将任一按钮垂直居中，这应该可以解决问题：

vertical-align：middle;