按钮动画。时：活动影响整个页面

Question

我尝试在平面网站上重新制作3D样式按钮，例如G +上的分享按钮，但是当我按下它时，它会通过向所有内容添加margin-top:3px来影响整个页面。它以某种方式按照我想要的方式工作，但它不仅适用于自我。

这是我的代码：

.button {
width: 100%;
background-color:#f1c40f;
color: #000000;
border: 0;
border-bottom: 3px solid #f39c12;
height: 50px;
font-family: 'Source Sans Pro', Montserrat, Helvetica, sans serif, Arial;
font-size: 24px;
}
.button:active {
    border-bottom: 0;
    margin-top: 3px;
    height: 47px;
    outline:0;
}

Answer 1

想出问题所在。我为表单分配了一个display:inline-block。现在就行！注意这个定位。会造成很大的麻烦！