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

Question

我的项目有问题。我并排有一些按钮。第一个是大按钮，第二个是中号按钮，第三个是小按钮。除了填充和颜色外，其中 3 个按钮具有几乎相同的 css 属性。当第一个被点击时，其他按钮改变它们的位置。单击第 2 个和第 3 个时，它们不会下降。我知道这种情况发生在 holder padding 和 1st one,s height 上。我想要第一个按钮的效果。第二和第三个只是删除边框，它们不会像第一个那样下降。有解决这个问题的方法吗？

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

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

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

Answer 2

将 .button1: active 样式更改为：

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

Answer 3

将此添加到您的 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

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

button creates bad effects on small buttons on click

css

position

button