如何实现按钮hover时背景色从左到右的过渡效果？

你的现有代码是通过直接过渡background-color属性实现颜色切换，这种方式只能让整个按钮背景色同时变化，无法达到从左到右的滑动过渡效果。下面提供两种可行的实现方案：

方案一：利用伪元素实现滑动效果 #

这种方式通过按钮的伪元素从左滑入来模拟背景色过渡，兼容性较好：

.btn {
    position: relative;
    background-color: transparent;
    color: #007eb6;
    border: 1px solid #007eb6;
    padding: 8px 16px;
    overflow: hidden;
    transition: color 0.5s ease;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #007eb6;
    transition: left 0.5s ease;
    z-index: -1;
}

.btn:hover::before {
    left: 0;
}

.btn:hover {
    color: #fafafa;
}

• 给按钮设置position: relative和overflow: hidden，限制伪元素的显示范围
• 伪元素初始隐藏在按钮左侧，hover时通过left属性的过渡从左滑入，覆盖整个按钮背景
• 单独过渡文字颜色，保证视觉流畅性

方案二：利用背景渐变与位置过渡实现 #

这种方式通过调整渐变背景的位置来实现滑动效果，代码更简洁：

.btn {
    background: linear-gradient(to right, #007eb6 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    color: #007eb6;
    border: 1px solid #007eb6;
    padding: 8px 16px;
    transition: all 0.5s ease;
}

.btn:hover {
    background-position: left bottom;
    color: #fafafa;
}

• 创建包含目标色与透明色的线性渐变背景，设置background-size: 200% 100%让背景宽度为按钮的两倍
• 初始状态下让透明区域显示在按钮上，hover时切换背景位置，使目标色从左到右覆盖按钮

内容的提问来源于stack exchange，提问作者Joda