我对鼠标悬停按钮的CSS转换是将容器向下推。

Question

我已经将HTML标记转换为一个按钮。在:hover上，我将y轴向下转换为10 by，并将其缩放为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 on hover of anchor tag.

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

移除边框底部属性，或在要应用边框的地方更具体。或

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

我想这应该能解决问题..。

*您代码的第86行