指尖的仪式感：一套 Apple 风按钮体系

按钮，是页面上唯一被”按”的东西

在这之前，我的按钮都是文字链接：一行蓝字、一个尖角符号。能用，但指尖落下去的那一刻，什么也没有发生。

Apple 的哲学是：每一个可按之物，都值得一次仪式。

三条曲线，一个体系

整套体系只有三个决定：

• 980px 的胶囊圆角——Apple 官网标志性的数字。不是 24px，不是 999px，就是一个大到让形状消失的数字
• #0071e3 的官网蓝——实心胶囊只给最重要的那一个动作，其余全部让位
• iOS 弹簧曲线 cubic-bezier(0.32, 0.72, 0, 1)——系统级的缓动，从 Sheet 到键盘共用这一个签名

按压回弹：一次工程上的让步

真正有意思的是手感。按压时按钮缩到 0.96、松手弹回——听起来是 transform: scale 一行的事。

但这个站用 GSAP 做磁吸，磁吸写的是内联 transform。CSS 的 transform 一旦写上去，就是两条通道打架。

解法是独立变换属性：scale 属性和 transform 属性在浏览器里各走各的合成通道，互不覆盖。一行 scale: 0.96，磁吸的位移和按压的回弹同时成立。

高级感有时不来自写了多少代码，而来自避开了一场本会发生的战争。

圆钮的柔光

联系区的圆形 GitHub 按钮保留了这个站最初的构图，只加了一层 Apple Watch 表冠式的待遇：悬停时一圈淡白扩散、一点蓝晕浮起，图标轻轻上浮两像素。

不变的构图，加了呼吸。

军规一条

按钮体系只有四个变体——实心胶囊、玻璃胶囊、链接型、图标型。页面上任何一个新交互，都从这四个里长出来，不再发明第五种。