CSS Animations

Appearance

滑入填充 Slide Fill ​

悬停时背景色从指定方向滑入覆盖按钮，文字颜色同步反转。

实时预览 ​

代码 ​

css
.btn-slide-fill {
  --fill-color: #0984e3;
  position: relative;
  padding: 14px 36px;
  border: 2px solid var(--fill-color);
  border-radius: 8px;
  background: transparent;
  color: var(--fill-color);
  cursor: pointer;
  z-index: 1;
  overflow: hidden;
  transition: color 0.4s ease;
}
.btn-slide-fill::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--fill-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: -1;
}
.btn-slide-fill:hover { color: #fff; }
.btn-slide-fill:hover::before { transform: scaleX(1); }
html
<button class="btn-slide-fill">Slide Fill</button>

纯 CSS 实现的滑入填充按钮动效——通过伪元素、过渡和变换让按钮在悬停和点击时产生视觉反馈。提升用户的操作感知和页面的交互品质，完全不需要 JavaScript。

快速使用 ​

  1. 复制 CSS 代码到你的样式文件中
  2. 在按钮元素上添加对应的 class 名称
  3. 调整颜色变量（如 --ripple-color）以匹配你的品牌色
  4. 确保按钮设置了 cursor: pointer 和合适的点击区域

使用场景 ​

  • CTA 主要按钮：发光或脉冲效果引导用户点击
  • 表单提交按钮：点击涟漪或 3D 按压提供即时的触觉反馈
  • 悬停操作按钮：边框填充或下划线扫过暗示可交互性
  • 危险/警告操作：抖动效果提示用户确认重要操作

常见问题 ​

Q: 按钮动效会影响点击区域吗？ A: 使用 transform: scale() 不会改变元素的布局尺寸，不影响点击区域。如果是 padding 或 width/height 变化，建议预留足够的点击热区（至少 44x44px）。

Q: 移动端按钮需要有按下的视觉反馈吗？ A: 强烈建议。用 :active 伪类实现按压反馈（scale(0.95) 或 translateY(2px)），让用户知道"已经点到了"。触摸屏没有 hover，active 是唯一的纯 CSS 反馈机制。

Q: 按钮动画会影响表单提交吗？ A: CSS 动画不会阻止表单提交。但如果用 animation-delay 或过长 animation-duration，按钮可能在动画期间看起来不可点击。建议动画时长不超过 0.5s。

浏览器兼容性 ​

浏览器兼容性
Chrome / Edge✅ 完全支持
Firefox✅ 完全支持
Safari✅ 完全支持
移动端浏览器✅ 完全支持
IE 11⚠️ 伪元素和 transform 基本可用，高级效果需降级

使用说明 ​

属性说明
--fill-color填充颜色，控制背景和边框
scaleX(0) → scaleX(1)水平缩放从0到1产生滑入效果
transform-origin: left从左侧开始滑入
z-index: -1伪元素在文字层下方
overflow: hidden防止填充溢出圆角边界

📎 相关动画推荐

以下更多 CSS 按钮动画 等你探索——每个都支持在线预览和一键复制代码。

渐变按钮抖动反馈脉冲呼吸旋转按钮下划线扫过形态变换