1
这里的演示：https://jsfiddle.net/krycLxb0/激活一个按钮也会影响其他？
这种设置方式是使创建按钮被按下的错觉，外容器（.button）的填充改变，使得顶部填充比更底部。但是，当它被激活时，另一个按钮似乎也缩小了。为什么会发生这种情况，我该如何解决？
这里的源：
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;
}<header>
<a class="button button--filled" href="#"><span>Get Started</span></a>
<a class="button button--dark" href="#"><span>Learn more</span></a>
</header>