我悬停的按钮的CSS过渡正在推动容器向下

我有一个HTML h3标签，我做了一个按钮过渡。在:hover我已经把它翻译成y轴10px并且按比例增加1.10。当发生转变它推动的容器里非常轻微，因为我会在屏幕截图显示：我悬停的按钮的CSS过渡正在推动容器向下

我知道这很难看到，但它向下推约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); 
}

任何帮助表示赞赏！

来源

2016-03-02 femmebug

我们不能帮你，因为'但是，codepen娱乐没有相同push-down effect.'你正在测试这个浏览器？您在codepen中排除的元素是否可以导致此问题？ – stackErr

我发布了codepen以防万一有人在看到它时发现我可能错过了某些东西。我正在使用chrome。我可以尝试将更多的页面元素添加到codepen中，并查看是否有更改。 @stackErr – femmebug

好吧，由于我在页面中添加了很多其他元素，所以我可以在这里重新创建下推效果：http://codepen.io/marlee/pen/VaLZPW?editors=1100 @stackErr – femmebug

你的问题是border-bottom对anchor taghover ..

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

卸下底部边框属性或要应用边框更具体。或

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

我想应该解决的问题......

*线86的codepen

来源

2016-03-02 05:25:59

非常感谢！你是对的。我改变了特异性。干杯。 @moid – femmebug

高兴地帮助你.. :) –

我悬停的按钮的CSS过渡正在推动容器向下

回答

相关问题