html - 我的悬停按钮的 CSS 过渡将容器向下推

Question

我在一个 HTML h3 标签上有一个转换，我已经把它变成了一个按钮。在 :hover 上，我让它沿 y 轴向下平移 10px 并按比例放大 1.10。当转换发生时，它会像我将在屏幕截图中显示的那样轻微地将容器向下推:

我知道这很难看清，但它会向下推大约 2-5 个像素。我一直无法弄清楚为什么会这样。我在这里重新创建了这个问题:http://codepen.io/marlee/pen/VaLZPW?editors=1100

这是 html:

<article class="about-page-cta">
      <h3>Want to get to know us better?</h3>
        <a href="contact.html"><h4 class="contact-us-button">CONTACT US</h4>     </a>
    </article>

和 CSS:

.about-page-cta{
 background-color: #30c0d8;
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 2rem 0 2rem 0
 }

.about-page-cta h3{
margin-top: 0;
padding-top: 2rem;
color: white;
}

.about-page-cta a {
text-decoration: none;
}

.contact-us-button{
color: white;
background: #FF6952;
border-radius: 10%;
border: none;
padding: .75rem;
margin: 1rem;
transition: transform, background, .5s ease;
transform: scale(1);
}

.contact-us-button:hover{
background: #ff5339;
box-shadow: 0 0 6px white;
transform: scale(1.05);
}

感谢任何帮助!!

Answer 1

你的问题是 border-bottom 在 anchor tag 的 hover 上..

a:hover{
  text-decoration: none; 
  color: #FF6952;
  border-bottom: 2px solid #30C0D8;
}

删除 border-bottom 属性或更具体地说明要应用边框的位置。或者

.about-page-cta a:hover {
border:0;
}

我想这应该可以解决问题......

*你的codepen的第86行