按钮是网页上被点得最多、却最少被认真设计的东西。大部分站点的按钮止步于「有个颜色、悬停变深一点」，用户点下去没有任何反馈，只能靠页面跳没跳来判断自己有没有点上。这件事看着小，但它直接影响转化——一个让人拿不准有没有点到的提交按钮，是会被反复点的。
下面这 14 款是童哲网上架的按钮与开关类前端效果，覆盖拟物按压、毛玻璃、渐变描边、液态形变、3D 开关、异步状态流转几类做法。我按接入成本分了三组：纯 CSS 的可以直接粘进任何项目；带 JS 的需要引一小段脚本；最后三款是 React 组件形式，不是纯 HTML，选之前得先看清楚。每款都写了它擅长什么、以及什么时候不该用它。
第一组 · 纯 CSS，粘进去就能用（01 - 07）
01. 拟物按压按钮 —— 解决「我到底点上没有」
纯 CSS 阴影 + 变形 按压反馈
默认状态是凸起的，鼠标按下去会真的「陷」进去，靠阴影和位移还原实体按键的手感。它解决的是文章开头那个问题：点击之后立刻有视觉变化，用户不会怀疑自己是不是点空了。技术上没什么花活，就是 box-shadow 加 transform，但调得很准——按下去的深度和回弹的速度都在合理范围，不会显得夸张。
什么时候别用它：如果你的站整体走扁平极简，这种拟物质感会显得突兀。它最该出现的位置是那些点错了有代价的按钮——支付确认、删除、提交订单，用户需要明确知道「我按下去了」。
按压深度与回弹节奏调校到位，手感接近实体键
只用 box-shadow + transform，无图片、无脚本
适合支付、删除、提交这类需要明确确认的操作
02. 渐变流光进度按钮 —— 用了 @property 和 oklch
纯 CSS @property oklch 进度环
这是这批里技术含量最高的一款，而且完全没用 JS。按钮左侧是虚线进度环显示完成百分比，右侧是标题、副标题和箭头，底部透出一层柔光。彩色渐变沿边框转，但只在下半部分显现、往上淡出，所以看着像光从底下溢出来，而不是一圈跑马灯在转。悬停时转速加快并反向，进度环从 20% 平滑涨到 80%，数字跟着变，箭头右移——几个动作同时发生但节奏错开。
它靠的是 @property 注册自定义属性，让渐变角度、百分比这类数值也能做补间，再配合遮罩合成实现只描边不填充的渐变边框；颜色用 oklch 色彩空间，过渡比传统 hsl 写法均匀。这些特性在新版浏览器里没问题，老浏览器会退化成一个静态按钮——不影响点击，只是动效没了，属于可以接受的降级。
@property + 遮罩合成实现可动画的渐变描边，纯 CSS 无脚本
oklch 色彩空间，渐变过渡比 hsl 更均匀
老浏览器降级为静态按钮，功能不受影响
适合注册引导、实名认证、资料完善、会员升级这类带进度语义的入口
03. 多彩渐变描边按钮 —— 登录与注册的优先级是设计出来的
纯 CSS 渐变描边 登录注册组件
一组两个按钮，思路是相反的：左边「登录」走镂空路线，黑底配粉紫蓝渐变描边，低调；右边「注册」满填充，从荧光绿过渡到粉紫，视觉重量明显更大。这是在用视觉语言告诉用户「我们更希望你注册」——按钮的优先级差异本来就该这么做，而不是两个一模一样的按钮并排放着让人选。
有个细节要注意：两个按钮悬停后的状态正好互换，镂空的变填充、填充的变镂空。这个设计挺聪明，但如果你只想拿其中一个单独用，记得把 hover 逻辑一起改，否则单个按钮的悬停会显得莫名其妙。
镂空 / 填充成对设计，天然表达主次按钮优先级
纯 CSS 线性渐变，无图片依赖
单独取用其中一个时，注意同步调整互换式的 hover 逻辑
04. 毛玻璃按钮 —— backdrop-filter 的正确用法
纯 CSS backdrop-filter Glassmorphism 深色友好
很多人做毛玻璃就是把透明度调低，结果按钮看起来只是「淡了」。这一款用的是 backdrop-filter，真正对背景做模糊折射，所以按钮像是悬浮在背景之上而不是叠在上面，边缘还有一圈若隐若现的微光模拟玻璃折射。这是 macOS 和 iOS 界面里那套语言，做出来确实能拉开档次。
代价也要讲清楚：backdrop-filter 是实时模糊背景，开销比普通半透明大，页面上放几十个会有性能压力；而且它必须有内容可模糊——放在纯色平面背景上，效果几乎看不出来。它真正出彩的地方是深色模式、或者底下压着高饱和渐变、图片的场景。
backdrop-filter 真实折射，不是单纯降透明度
边缘微光模拟玻璃折射，细节质感突出
需要背景有内容才出效果，纯色底上基本无感
实时模糊有性能成本，不宜大批量堆在同一屏
05. 3D 金属发光开关 —— 500px 视距撑出来的悬浮感
纯 CSS 3D 透视变换 多层发光
一个切换开关，但做成了悬浮在空中的金属硬件。实现上是 500px 的透视视距加上六层模拟光子的发光渐变滤镜堆叠出来的，全程纯 CSS，没有引任何 3D 库。视觉密度很高，属于放在页面上就会被注意到的那种元素。
反过来说，它的存在感太强，不适合当成普通设置项里的开关用——一屏放五个这种开关，页面就没法看了。它更像是一个主视觉级别的交互装置，用在一个的位置上。
纯 CSS 3D 透视 + 多层发光渐变，不依赖 Three.js 等库
视觉密度高，适合作单个主视觉级交互元素
不适合批量用于设置页这类需要多个开关的场景
06. Q 弹弹跳按钮 —— 游戏感的那种活泼
纯 CSS 弹性动画 立体厚底
按钮自带立体厚底阴影，悬停时会弹性扭动、弹跳，是那种一看就知道点下去会有事情发生的活泼感。游戏开始菜单、儿童与亲子类站点、活动页的主按钮是它的主场。
调性很明确，也就意味着适用面窄——放在企业官网或者金融类页面上会显得不正经。选它之前先确认你的站是不是这个气质。
纯 CSS 弹性关键帧，无脚本依赖
游戏、亲子、活动页调性契合度高
严肃型站点慎选，气质冲突明显
07. 六款节日炫彩按钮组 —— 一次拿到一整套
纯 CSS 6 款一组 粒子动效 节日主题
一组六个节日主题按钮，用色彩渐变、悬停位移和雪花飘落一类的粒子动效做出气氛。它的价值在于成套——做促销专题或节日活动页时，主按钮、次按钮、领券按钮往往要同时上，风格统一比单个好看更重要。
节日属性强，平时用会显得跳脱，比较适合按活动周期临时替换。
六款成组，活动页多个按钮位可统一风格
CSS 动画 + 滤镜实现粒子氛围，无外部资源
节日色彩浓，建议按活动周期临时启用
第二组 · 需要一点 JavaScript（08 - 11）
08. 厚重 3D 立体按钮组件 —— 当成按钮库用的那种
CSS + JS 多配色 全尺寸规格 多形态
这一款不是单个效果，是一整套按钮体系：多套主流配色、全尺寸规格，覆盖图标按钮、通栏按钮、悬浮按钮等形态，按压反馈明显。跟前面第 01 款拟物按钮的区别在于——那个是一个精调的单品，这个是可以直接当项目按钮库铺开用的成套方案。
做后台系统、H5、小程序时，最费时间的往往不是设计一个好看的按钮，而是把主按钮、次按钮、危险按钮、禁用态、大中小三档尺寸都补齐。这套省的就是这部分工。
多配色 + 全尺寸规格，可直接当项目按钮库
覆盖图标按钮、通栏按钮、悬浮按钮多种形态
立体质感与按压反馈比扁平按钮引导性更强
09. 拟物胶囊导航 —— 靠明暗对比说清「哪个选中了」
CSS Transition + 少量 JS 分段控件 阴影叠层
严格说这是个分段控件（segmented control）而不是单个按钮，但它解决的是同一类问题：选中态要一眼看得出来。做法是靠精细的阴影叠层和色块位移模拟实体按键——选中项像浮起来的实体按钮，悬停态则给一个柔和的暗示。整个组件没有任何多余装饰，全靠明暗对比引导视线。
这种仿生逻辑的好处是零学习成本，用户不用想就知道当前在哪一项。移动端 App 顶部切换、作品集的分类筛选、SaaS 后台的视图切换都合适。
阴影叠层模拟实体按键，选中态识别度高
无多余装饰，纯靠明暗对比引导，不挑配色
CSS Transition 为主，仅需少量脚本控制切换
10. 液态熔融发送按钮 —— SVG 滤镜做的粘连形变
CSS + JS + SVG Goo 液态 状态过渡
点击纸飞机发送按钮后，形状会像液体一样粘连、拉伸、重组，最后落到成功状态。这类「Goo 效果」靠的是 SVG 滤镜——高斯模糊之后再拉高对比，把两个靠近的形状粘成一团，是个很经典的做法，但调参很挑人，模糊半径和对比阈值差一点就会糊成一坨。这一款调得干净。
它的实际价值不只是好看：发送、提交这类操作天然有等待期，一段连贯的形变动画正好把等待填掉，用户不会觉得卡住了。聊天窗口、表单提交、消息发送是最对口的位置。
SVG 滤镜实现 Goo 粘连形变，参数调校干净不糊
用动画覆盖提交等待期，弱化延迟感知
适合聊天发送、表单提交、消息推送类交互
11. 电商下单状态动画 —— 加载环直接变成对勾或叉号
GSAP + SVG 异步状态流转 成功 / 失败双流程
这一款是这批里最「工程化」的一个。它给的是两套完整的异步状态流程——购买成功和删除失败——从环形加载开始，加载环通过 SVG 形状变形无缝转成对勾或叉号，还带产品图联动滑出。关键在于无论异步操作实际耗时多久，动画都保持连贯，不会出现接口秒回导致动画一闪而过、或者接口慢了动画早就播完在那儿干等的尴尬。
这个「时长不确定」的问题是所有异步按钮动画的真正难点，多数现成效果都没处理。要做电商下单、收藏、删除这类按钮，它比一个单纯好看的按钮实用得多。代价是依赖 GSAP，首屏要多加载一个库。
成功 / 失败两套完整状态流程，不是单一动效
加载环经 SVG 形变直接转为对勾 / 叉号，无跳变
已处理异步时长不确定的衔接问题，这是同类效果的通病
依赖 GSAP，需评估首屏体积
第三组 · React 组件形式（12 - 14）—— 选之前先确认技术栈
下面三款是 React 组件，不是可以直接双击打开的静态 HTML。如果你的项目本来就是 React，拿来即用；如果不是，需要把组件逻辑改写成原生 JS 才能接入，工作量视效果复杂度而定。这一点在下单前请务必确认。
12. 伪 3D 翻转点赞爱心 —— 给点击加一点仪式感
CSS3D + SVG + React 微交互 粒子散射
点击时爱心沿 Y 轴翻转，同时爆出光晕和散射粒子。点赞这个动作本身没有任何反馈成本，但有没有这一下动画，用户的互动意愿差别不小——这是社交产品里被验证过很多次的事情。博客文章点赞、商品收藏、社区互动都用得上。
翻转 + 光晕 + 粒子三层反馈，点击的即时感强
SVG 矢量绘制，任意尺寸清晰
React 组件形式，非 React 项目需改写
13. 机票预订按钮 —— 点下去，按钮里飞出一片海
React + CSS 动画 场景化微交互 旅游行业
默认就是一个干净克制的蓝色按钮，看不出名堂；一旦触发，按钮内部展开成俯瞰海面与海岛的微缩飞行场景。这种把「按钮」变成「一小段叙事」的做法，在旅游类页面上特别管用——它卖的不是功能，是那种「要出发了」的情绪。
适用面很窄，基本只服务航空票务、旅游落地页、民宿预订、出游主题 H5 这几类场景，但在这几类场景里它的说服力比任何通用按钮都强。
默认态克制、触发态叙事化，反差是它的记忆点
专为旅游出行类行为召唤设计，场景针对性强
React 组件形式，非 React 项目需改写
14. on / off 字母开关 —— 开关本身就是那个字母 O
React + CSS 形义合一 仅适配英文
左边那个椭圆开关本身就充当字母「O」，滑块上下移动时，旁边的「n」和「ff」跟着放大缩小，哪个状态激活哪个字母就变大。开关既是功能组件，又是文字的一部分——形式和内容合一，不需要额外的文字说明，用户一眼就懂，比那些千篇一律的圆形 toggle 有辨识度多了。
但它有个绕不开的限制：这个巧思建立在 on / off 这两个英文单词的字形上，中文场景直接用不了。要么保留英文，要么就得重新设计一套字形逻辑。用在夜间模式切换、播放器开关、通知启用这类界面上很合适，前提是你的界面本来就用英文标签。
开关与字母 O 合二为一，形义统一，记忆点强
字母缩放即状态反馈，无需额外文字说明
仅适配英文标签，中文界面需重新设计字形
React 组件形式，非 React 项目需改写
怎么挑：先想清楚这个按钮要解决什么
按钮效果最容易踩的坑，是照着「哪个好看」挑，而不是照着「这个位置需要什么」挑。几个常见诉求对应的答案：
用户点了没反应、总是重复点：第 01 款拟物按压，或第 08 款那套立体按钮。核心是按下去必须有可见变化。
提交要等接口，怕用户以为卡了：第 11 款电商状态动画最专业，它处理了异步耗时不确定的衔接；轻量一点的选第 10 款液态发送。
要给项目补一整套按钮规范：第 08 款，多配色多尺寸多形态是现成的，比拿单个效果去扩展省事。
深色模式或图片背景上的按钮：第 04 款毛玻璃，注意它需要背景有内容才出效果。
想在首屏放一个抓眼球的交互装置：第 05 款 3D 金属开关或第 02 款流光进度按钮，但都只适合放一个。
项目不是 React：直接跳过第 12 - 14 款，前十一款都能直接接入。
这些都是独立的前端效果源码，HTML、CSS、JS 完整提供，可以单独嵌进现有页面。需要提醒的是，按钮属于高频交互元素，动效时长建议控制在 200 - 300 毫秒以内——超过这个区间，「好看」就会变成「慢」。
常见问题
Q：按钮加动效会不会影响页面性能？
A：绝大多数不会。CSS 的 transform 和 opacity 动画走的是合成层，不触发重排重绘，开销很小。真正要留意的有两类：一是第 04 款用到的 backdrop-filter，它每帧都要重新模糊背景，同屏放太多会掉帧；二是第 11 款依赖的 GSAP，问题不在动画本身而在多加载一个库。除此之外，按钮动效的性能顾虑基本可以忽略。
Q：这些按钮在移动端能正常用吗？触屏没有 hover 怎么办？
A：这是个很实际的问题。触屏设备没有真正的悬停状态，依赖 hover 触发的效果（第 03、04、06 款的主要动效都在 hover 上）在手机上会失效或者变成「点一下才触发、再点才跳转」的怪异行为。稳妥的做法是用 @media (hover: hover) 把悬停效果限定在有指针设备的环境，移动端改用 :active 的按压反馈。第 01 款拟物按压这类本来就靠 active 状态的效果，在触屏上反而表现最自然。
Q：按钮做得太花哨会不会影响转化？
A：会，方向是两头都可能出问题。按钮完全没反馈会让用户不确定是否点中，重复点击甚至放弃；但动效过重、时长过长同样劝退——尤其是主转化按钮，用户想的是「快点让我下单」，不是「欣赏这个动画」。经验区间是主按钮动效控制在 200 - 300 毫秒，装饰性更强的效果放到次级位置。这批里第 05、13 款视觉重、更适合非主转化位；第 01、08 款克制，适合放在关键路径上。
Q：按钮效果对 SEO 和无障碍有影响吗？
A：SEO 上基本没影响，按钮不承载正文关键词。真正要注意的是无障碍：请确保按钮用的是 button 或 a 标签，而不是加了点击事件的 div —— 后者键盘 Tab 不到、屏幕阅读器也读不出来。开关类组件（第 05、14 款）还应补上 role="switch" 和 aria-checked，让辅助技术能读出当前状态。另外建议加一句 @media (prefers-reduced-motion: reduce)，对设置了减少动态效果的用户关闭动画，这是现在比较通行的做法。
Q：能不能把几款按钮混在同一个页面上用？
A：技术上没问题，各自的 CSS 类名独立，注意别撞名即可。但设计上不建议——同一个页面出现两三种风格迥异的按钮，会让用户失去对「什么是可点的」的判断。合理的做法是选一套作为全站按钮语言，再用尺寸、填充与描边的差异去区分主次；只有点赞、开关这类语义特殊的组件，才值得单独用一款不同风格的效果。
