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

时间:2014-02-07 22:20:03

标签: html css html5 css3

我尝试在平面网站上重新制作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;
}

1 个答案:

答案 0 :(得分:0)

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