CSS 按钮动画效果合集

按钮是页面上最重要的交互元素。一个有反馈感、有质感的按钮动效，能显著提升点击率和用户体验。

本分类收录了 20 种 CSS 按钮动画效果：

点击反馈：3D 按压、涟漪按钮、抖动反馈
悬停装饰：发光按钮、渐变按钮、边框填充、幽灵边框
动画效果：脉冲呼吸、边框舞蹈、光泽扫过、形态变换
填充动画：滑入填充、渐变滑入填充、下划线扫过
变形：胶囊按钮、弹跳按钮、旋转按钮

热门按钮效果推荐

核心技术

按钮动画的核心在于 ::before/::after 伪元素的使用：

css

.btn {
  position: relative; overflow: hidden; z-index: 1;
}
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  z-index: -1; transform: translateX(-100%);
  transition: transform 0.3s;
}
.btn:hover::before { transform: translateX(0); }

最佳实践：

点击反馈用 :active，悬停效果用 :hover
移动端去掉 hover 效果，保留 active 反馈
用 scale() 配合 cubic-bezier 制作弹性反馈

Hover 效果 · 卡片动画 · 表单动画

友链

更多相关站点