The Ritual of a Button: an Apple-Style Button System

A button is the only thing on the page that gets pressed

Before this, my buttons were all text links: a line of blue text, a chevron. Functional — but when your fingertip landed, nothing happened.

Apple’s philosophy: every pressable thing deserves a ritual.

Three curves, one system

The whole system is three decisions:

• The 980px pill radius — Apple.com’s signature number. Not 24px, not 999px, but a number large enough to dissolve the shape itself
• The #0071e3 store blue — the solid pill goes only to the single most important action; everything else steps aside
• The iOS spring curve cubic-bezier(0.32, 0.72, 0, 1) — a system-level easing, shared from sheets to keyboards. One signature

Press rebound: an engineering concession

The real story is the feel. On press the button scales to 0.96 and springs back — sounds like one line of transform: scale.

But this site uses GSAP for magnetic hover, and magnetism writes inline transform. Add a CSS transform and the two channels go to war.

The fix is independent transform properties: the scale property and the transform property travel separate compositing channels and never overwrite each other. One line of scale: 0.96, and magnetic displacement and press rebound coexist.

Sophistication sometimes comes not from how much code you write, but from the war you avoid starting.

The halo on the round button

The circular GitHub button in the contact section keeps its original composition, and gains only an Apple Watch crown treatment: on hover, a ring of pale white spreads out, a trace of blue haze rises, and the icon floats up two pixels.

The composition unchanged; given breath.

One rule

The button system has exactly four variants — solid pill, glass pill, link, icon. Every new interaction on the page grows out of one of these four; a fifth is never invented.