css 收缩按钮影响其他元素

j1dl9f46  于 2023-06-07  发布在  其他
关注(0)|答案(1)|浏览(148)

我添加了积极的伪类到我的HTML按钮,我希望他们缩小时,他们被点击…问题是它们会影响到页面上的每一个元素。我只想让按钮缩小,每个元素都应该保持静止...
这是我的纽扣:

<div class="btn-container">
  <button id="btn-start" class="btn">Start</button>
  <button id="btn-stop" class="btn">Stop</button>
  <button id="btn-reset" class="btn">Reset</button>
</div>

它们的基本样式:

.btn-container .btn{
    background: #fe2f6d;
    border: none ;
    padding: 20px 50px;
    margin: 0px 0 0 10px;
    color: #fff;
    font-weight: 400;
    font-size: x-large;
    border-radius: 7px;
    cursor:pointer;
}

以及活动伪:

.btn:active{
   padding: 18px 48px;
}
yjghlzjz

yjghlzjz1#

我在这里使用CSS scale属性,而不是改变填充:

.btn-container .btn {
  background: #fe2f6d;
  border: none;
  padding: 20px 50px;
  margin: 0px 0 0 10px;
  color: #fff;
  font-weight: 400;
  font-size: x-large;
  border-radius: 7px;
  cursor: pointer;
}

.btn:active {
  transform: scale(0.9);
}
<div class="btn-container">
  <button id="btn-start" class="btn">Start</button>
  <button id="btn-stop" class="btn">Stop</button>
  <button id="btn-reset" class="btn">Reset</button>
</div>

相关问题