html - 按钮动画。当:active affects whole page

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

解决了这个问题。我为表单分配了一个 dip display:inline-block。现在工作!小心那个定位。会引起很多麻烦!