我在悬停按钮上的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 hover的问题anchor tag为<{1}}。

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

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

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

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

*您的codepen的第86行