html - 平滑的按钮过渡

Question

将鼠标悬停在按钮上后，按钮所在的扩展容器出现问题。它在振动，这让它看起来真的很糟糕。理想情况下仅使用 CSS 即可解决问题，因为我也将这些样式用于表单的提交按钮。

关于如何改进它有什么建议吗？

Link to codepen

<div class="button-container">
  <a class="button" href="#">Text</a>
</div>


.button-container {
background: red;
}
.button {
background:#fff;
font-size:1em; 
padding:18px 26px; 
display:inline-block; 
margin:5px; 
border-radius:6px; 
border:solid rgba(0,0,0,0.2); 
border-width:1px 1px 5px; 
box-shadow:0 5px 0 rgba(0,0,0,0.1), inset 0 0 2px rgba(255,255,255,0.3); 
cursor:pointer; 
user-select:none; 
transition:0.4s ease; 
min-width: 10em;
margin-top: 3px;
}

.button:hover {
margin-top: 0;; 
box-shadow:0 6px 0 rgba(0,0,0,0.1), inset 0 0 1px rgba(255,255,255,0.4); 
border-bottom-width:8px; 
margin-top: 0px;
}

.button:active {  
box-shadow:0 2px 0 rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.4); 
border-bottom-width:2px; 
transition:0.1s ease;
margin-top: 7px;
}

Answer 1

如果您将按钮定位为绝对位置，它不会影响容器大小:

.button {
  position: absolute;
}
.button-container {
  height: 68px; /* ensure the container still has the same size */
}