Question

带有按钮的页面：http://teamcherry.com.au/jam-games/

我试图通过此页面上的链接实现的效果是按钮在悬停时展开，文本保持相同的大小，并且文本保持在屏幕上的相同位置（因此按钮不会t在改变大小时似乎“移动”。

经过一段时间的研究，我已经设法使用下面的css达到了预期的效果，它使用css过渡在悬停时更改了填充边距：

a.btn {
    display: inline-block;
    background-color: #d11b34;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    padding: 10px;
    padding-right: 20px;
    padding-left: 20px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
        transition: all 0.3s ease 0s;
}

a.btn:hover {
    background-color: #a61529;
    padding: 15px;
    padding-right: 25px;
    padding-left: 25px;
    margin: -5px;
}

这实现了效果，但是当在Chrome（以及可能的其他浏览器）中制作动画时效果非常紧张，并且当悬停时按钮似乎颤动。

有没有其他方法可以在没有动画抖动的情况下实现这种精确效果？理想情况下，在纯CSS中，但如果需要JS或JQ，那么我将使用它。

Answer 1

使用硬件加速并为动画添加更多时间（如果需要可以调整），它看起来不错。您还可以使用轻松进入以获得更平滑的效果。在FF和Chrome中测试

a.btn {
display: inline-block;
background-color: #d11b34;
color: #fff;
text-decoration: none;
font-size: 20px;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
transition: all 0.6s ease;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

Answer 2

使用transition scale。这对你来说是更顺畅的解决方案：）

a.btn {
    display: inline-block;
    background-color: #d11b34;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    padding: 10px;
    padding-right: 20px;
    padding-left: 20px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
}

a.btn:hover {
    -webkit-transform: scale(1.05,1.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1.05,1.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;

}

在Chrome控制台中测试过。希望它有所帮助：）

尝试制作一个在悬停时增长的CSS按钮，文本大小保持不变

2 个答案: