Question

我hava用CSS模仿了https://codepen.io/xflotus/pen/deXBzR的作品制作了两个按钮。但是当点击其中一个时，它们会一起移动。我仔细检查了代码，但找不到线索。代码笔位于：https://codepen.io/xflotus/pen/gzWyrg。我认为：主动不是问题：

＆＃13;

.button:active {
  margin: 2px 0px 20px 10px;
}

＆＃13;

但是，我不知道如何找到错误。谢谢！

Answer 1

更改边距不是使按钮移动到活动状态的最佳方法，因为整个容器向下移动。对于单个按钮的移动，请尝试使用此代码并删除带有边距的旧代码：

.button:active{transform:translateY(10px)}

现在只有一个按钮会移动而不是两个按钮。如果您需要旧版浏览器的支持，也可以使用-webkit-transform属性，但新版本不需要它。

有关此主题的更多信息：LINK

编辑：

完整代码SNIPPET：

＆＃13;

.button {
  display: inline-block;
  padding-left: 68px;
  padding-right: 20px;
  height: 40px;
  line-height: 40px;
  font: 'Arial', Helvetica, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: black;
  text-decoration: none;
  margin: 0px 0px 20px 10px;
  position: relative;
}

.button .bar {
  width: 1px;
  height: 30px;
  background: black;
  position: absolute;
  top: 5px;
  left: 50px;
}

.button .arrow {
  position: absolute;
  left: 20px;
  top: 11px;
}

.button .arrow .top {
  position: absolute;
  top: 0;
  left: 3px;
  width: 6px;
  height: 9px;
  background: #000;
}

.button .arrow .bottom {
  position: absolute;
  top: 9px;
  left: -2px;
  width: 0px;
  height: 0px;
  border-width: 8px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.button:active{transform:translateY(10px)}


/* ---------- CSS3 ------------*/

.button {
  border-radius: 3px;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
  transition: background-position .2s ease, margin .1s ease;
  -webkit-transition: background-position .2s ease, margin .1s ease;
  -moz-transition: background-position .2s ease, margin .1s ease;
  background-repeat: repeat-x;
}

.button:hover {
  background-position: 0 10px;
}

.blue {
  background-color: #00aeef;
  background-image: -webkit-linear-gradient(top, #00aeef, #00587a);
  background-image: linear-gradient(top, #00aeef, #00587a);
  text-shadow: 1px 1px 1px #23aaff;
  border-top: 1px solid #23ccff;
}

.blue .bar {
  box-shadow: 1px 1px 1px #23ccff;
}

.green {
  background-color: #0f9;
  background-image: -webkit-linear-gradient(top, #0f9, #060);
  background-image: linear-gradient(top, #0f9, #060);
  text-shadow: 1px 1px 1px #9f0;
  border-top: 1px solid #23ccff;
}

.green .bar {
  box-shadow: 1px 1px 1px #9f0;
}

＆＃13;

<div id="container">
  <a href="#" class="button blue">
    <div class="arrow">
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
    <div class="bar"></div>
    Download
  </a>

  <a href="#" class="button green">
    <div class="arrow">
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
    <div class="bar"></div>
    Download
  </a>
</div>

＆＃13;

Answer 2

Jakub Muda answer在代码方面比我的要好，但要回答你的确切问题，那是因为你为点击的按钮添加了一个边距，它会将容器向下推，这样两个按钮都会移动。

我修改了您的来源https://codepen.io/anon/pen/RyVOyV，现在他们不会一起移动。问题是要获得它，我必须让它们绝对位置。

.blue {
  position:absolute;
  top:15px;
}

.green {
  position:absolute;
  top:15px;
  left:180px;
}

你可以更多地操纵它们以使它们相对独立地定位，但这超出了这个问题的范围。

希望它有所帮助;）

为什么两个按钮一起移动？

2 个答案: