按钮在单击时对小按钮产生不良影响

Question

我的项目有问题。我有一些并排的按钮。第一个是大的，第二个是中的，第三个是小按钮。除了填充和颜色外，其中 3 个按钮具有几乎相同的 css 属性。当第一个被点击时，其他按钮会改变它们的位置。当第二个和第三个被点击时，他们不会下来。我知道支架填充和第一个高度会发生这种情况。我想要第一个按钮的效果。第二个和第三个只是删除边界，它们不会像第一个那样下降。有什么办法可以解决这个问题吗？

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    color: #FFF;
}
.super-holder {
    display: block;
    text-align: center;
    padding: 20px;
    background-color: #f06060;
    font-size: 20px;
}
a:active, a:hover {
    outline: 0;
}
.btn1 {
    border-radius: 4px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 26px;
    background-color: #9C27B0;
    display: inline-block;
    text-decoration: none;
    border-bottom: 4px solid rgba(0,0,0,0.21);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}
.btn1:active {
    position: relative;
    border-bottom: 0px solid rgba(0,0,0,0.21);
    margin-top: 4px;
    color: #FFF;

}
.btn2 {
    border-radius: 3px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 20px;
    background-color: #79B039;
    display: inline-block;
    text-decoration: none;
    border-bottom: 4px solid rgba(0,0,0,0.21);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}
.btn2:active {
    position: relative;
    border-bottom: 0px solid rgba(0,0,0,0.21);
    margin-top: 4px;
    color: #FFF;

}
.btn3 {
    border-radius: 3px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 15px;
    background-color: #3F51B5;
    display: inline-block;
    text-decoration: none;
    border-bottom: 4px solid rgba(0,0,0,0.21);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}
.btn3:active {
    position: relative;
    border-bottom: 0px solid rgba(0,0,0,0.21);
    margin-top: 4px;
    color: #FFF;
}

demo on jsfiddle

Answer 1

在你的CSS中添加这个

.super-holder div{
    float:left;
    height:80px;
    width:120px;
}
.clear{clear:both}

并将您的按钮包装在 div

<div class="super-holder">
    <div><a class="btn1">Button</a></div>
    <div><a class="btn2">Button</a></div>
    <div><a class="btn3">Button</a></div>
    <p class='clear'></p>
</div>

这里是Demo

Answer 2

第一个问题是你在 btn1:active 上的margin-bottom: 4px。如果你这样做，按钮会移动，我认为你不想要。

就边界而言，您可能会更适合使用阴影之类的东西，甚至更好的是您可以在活动时更改的渐变。问题是您的边框被添加到按钮的高度，而不是“在”按钮的边界内。相反，使用类似这样的东西：http://www.colorzilla.com/gradient-editor/ 来生成一个渐变，该渐变可以在元素变为活动时发生变化。这样颜色变化将在元素内发生。

Answer 3

将 .button1: 活动样式更改为：

.btn1:active {
     position: relative;
     border-bottom: 0px solid rgba(0,0,0,0.21);
     margin-bottom: 4px;  /* <--- THIS */
     color: #FFF;    
 }