尝试制作一个在悬停时增长的 CSS 按钮，文本保持相同大小答案

【问题标题】：Trying to make a CSS button that grows on hover, with text remaining the same size尝试制作一个在悬停时增长的 CSS 按钮，文本保持相同大小
【发布时间】：2014-08-18 05:45:35
【问题描述】：

此处带有按钮的页面：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，那么我将使用它。

【问题讨论】：

与其提供指向您页面的链接，不如尝试将演示发布到jsfiddle.net。这样，当您的网站修复后，您的问题仍然存在。
啊好吧，有道理。这里还是新的。让我知道干杯。
你可以看看这个，它为你的问题提供了一个解决方法：stackoverflow.com/a/25362700/1811992

标签： css

【解决方案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);
}

【讨论】：

嗯，我刚刚尝试了你的代码，这是一个改进，但在 Mac 上使用 Chrome 时，我仍然看到框在动画时抖动，尽管文本本身现在仍然存在。感谢您的观看。

【解决方案2】：

我是通过 box-shadow 实现的

a {
    transition: .2s ease;

    &:hover {
        box-shadow: 0 0 0 .3rem $color;
    }
}

【讨论】：

【解决方案3】：

使用 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 控制台中测试。希望对你有帮助:)

【讨论】：

文本也会缩放。问题指出文本大小应保持不变。
是的，乔恩，没错。感谢您查看 Khaleel，但是是的，我需要文本保持不变
哦，是的。尝试嵌套 div 而不是锚点和文本，并将变换比例仅应用于父 div，而不是包含 div 的文本。