CSS如何解决按钮hover结束后文字无法平滑返回原始位置问题

问题原因 #

transition属性仅配置在hover状态的规则中，仅会在鼠标移入触发hover时生效。鼠标移出后元素回归普通状态，普通状态未配置过渡规则，因此文字会直接跳回初始位置。

修复方法 #

将transition属性移动到.button-text的基础样式中，同时为其设置初始的padding-left默认值，保证进出hover状态都能触发平滑过渡。

修改后的完整CSS代码： #

.contact-us-button {
    cursor: pointer;
    background-color: #242628;
    border-radius: 5px;
    padding: 15px 32px 16px 30px;
    font-family: 'Helvetica Neue Light';
    font-size: 18px;
    line-height: 18px;
    width: 280px;
    color: #FFFFFF;
}
/* 新增.button-text基础样式 */
.button-text {
    padding-left: 0;
    transition: padding-left 0.2s ease-in-out;
}
.contact-us-button:hover .button-text {
    padding-left: 15px;
}

可选优化方案 #

如果你使用的是自适应宽度的按钮，担心padding-left变化导致按钮宽度抖动，可以用transform代替padding实现位移，性能更好也不会影响盒模型：

.button-text {
    transform: translateX(0);
    transition: transform 0.2s ease-in-out;
}
.contact-us-button:hover .button-text {
    transform: translateX(15px);
}

内容的提问来源于stack exchange，提问作者U. Watt