我的悬停按钮的 CSS 过渡将容器向下推答案

【问题标题】：My CSS transition for a button on hover is pushing the container down我的悬停按钮的 CSS 过渡将容器向下推
【发布时间】：2016-03-02 13:41:33
【问题描述】：

我已将 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);
}

感谢任何帮助！

【问题讨论】：

我们无法帮助您，因为however, the codepen recreation doesn't have the same push-down effect. 您在哪个浏览器上测试这个？您是否在 codepen 中排除了某些元素...它们会导致问题吗？
我发布了 codepen，以防有人在查看时发现我可能错过的东西。我正在使用铬。我可以尝试将更多页面元素添加到 codepen 中，看看是否有变化。 @stackErr
好的，因为我将页面中的许多其他元素添加到代码中，所以我能够在这里重新创建下推效果：codepen.io/marlee/pen/VaLZPW?editors=1100@stackErr
你试过 CSS overflow: hidden; 吗？在这里找到：w3schools.com/cssref/pr_pos_overflow.asp
那么在这种情况下，我应该把overflow: hidden 放在什么位置？我尝试将它放在号召性用语容器上，即。 .about-page-cta 它似乎没有改变任何东西。 @杰夫

标签： html css css-transitions css-transforms

【解决方案1】：

你的问题是border-bottom on hover of anchor tag..

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

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

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

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

*codepen 的第 86 行

【讨论】：

非常感谢！你是对的。我改变了特异性。干杯。 @moid
很高兴为您提供帮助.. :)