Question

设置方式是为了创建按下按钮的错觉，外部容器（.button）的填充被更改，使顶部填充比底部更多。但是，当激活它时，另一个按钮似乎也会缩小。为什么会发生这种情况，我该如何解决？

以下是来源：

＆＃13;

header {
  letter-spacing: .04em;
  font-weight: 900;
  font-family: sans-serif;
}

.button {
  padding: 4px;
  padding-bottom: 12px;
  border-radius: 6px;
  display: inline-block;
  transition: 300ms ease;
  will-change: auto;
  text-transform: uppercase;
  text-align: center;
  font-size: 14px;
  text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2);
}

.button span {
  display: inline-block;
  width: 10em;
  padding: 1.2em;
  border-radius: 2px;
  background: #FF4A50;
}

.button:hover {
  box-shadow: 0px 6px 0px 0px rgba(0, 0, 0, 0.2);
}

.button:active {
  transition: none;
  padding-top: 12px;
  padding-bottom: 4px;
}

.button--filled {
  background: #BC2E56;
  color: white;
}

.button--filled span {
  background: #FF4A50;
}

.button--dark {
  background: rgba(65, 57, 76, 0.6);
}

.button--dark span {
  background: #FFF8F2;
}

＆＃13;

<header>

  <a class="button button--filled" href="#"><span>Get Started</span></a>
  <a class="button button--dark" href="#"><span>Learn more</span></a>

</header>

＆＃13;

Answer 1

因为您的按钮现在是vertical-align: baseline。只需将vertical-align: top;添加到.button即可。见fiddle

激活一个按钮也会影响另一个按钮？

1 个答案: