Million-Dollar Details · EP01Insight1 min read
The $300 million button
An online store changed one button and made $300 million more in a year. Here is the button from the reel: live, with all nine details, ready to copy.
01
Try it
Hover it, move around it, press it. On the left the browser default, on the right the one from the reel.
default <button>
nine details later
02
The button, ready to copy
Plain HTML, CSS and JavaScript. Every detail from the reel is marked in the CSS.
<!-- Pill button · metic.studio · Million-Dollar Details EP 01 -->
<a class="pill" href="#start">
<span class="pill__glow" aria-hidden="true"></span>
<span class="pill__label">Start a project</span>
<span class="pill__dot" aria-hidden="true">
<svg viewBox="0 0 256 256" width="16" height="16" fill="currentColor">
<path d="M204,64V168a12,12,0,0,1-24,0V93L72.49,200.49a12,12,0,0,1-17-17L163,76H88a12,12,0,0,1,0-24H192A12,12,0,0,1,204,64Z"/>
</svg>
</span>
</a>
<style>
.pill {
--ink: #121214; --paper: #f4f4f2; --accent: #ff3e3e; --lens: cubic-bezier(.23, 1, .32, 1);
position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 14px;
height: 52px; padding: 0 8px 0 24px; border-radius: 999px; /* size + shape */
background: var(--ink); color: var(--paper); /* color */
font: 500 15.2px/1 "Space Grotesk", system-ui, sans-serif; /* type */
text-decoration: none; white-space: nowrap; transition: scale .16s var(--lens);
}
.pill:active { scale: .97; } /* press */
.pill__glow { /* light */
position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .16), transparent 60%);
transition: opacity .35s var(--lens);
}
.pill__label { position: relative; }
.pill__dot { /* signal */
display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
background: var(--accent); color: #fff; transition: transform .35s var(--lens);
}
.pill__dot svg { transition: transform .35s var(--lens); }
@media (hover: hover) and (pointer: fine) { /* hover */
.pill:hover .pill__glow { opacity: 1; }
.pill:hover .pill__dot { transform: translate(2px, -2px); }
.pill:hover .pill__dot svg { transform: rotate(45deg); }
}
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pill, .pill * { transition-duration: .01ms !important; } }
</style>
<script>
// Light follows the cursor + magnet with a spring (stiffness 220, damping 18, mass .6, strength .32)
document.querySelectorAll('.pill').forEach((el) => {
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
const K = 220 / .6, C = 18 / .6, S = .32
let tx = 0, ty = 0, x = 0, y = 0, vx = 0, vy = 0, raf = 0, last = 0
const frame = (now) => {
const dt = Math.min(.032, (now - (last || now)) / 1000) || 1 / 60; last = now
vx += (K * (tx - x) - C * vx) * dt; vy += (K * (ty - y) - C * vy) * dt
x += vx * dt; y += vy * dt
el.style.translate = `${x.toFixed(2)}px ${y.toFixed(2)}px`
if (Math.abs(tx - x) + Math.abs(ty - y) + Math.abs(vx) + Math.abs(vy) < .1) { raf = 0; last = 0; return }
raf = requestAnimationFrame(frame)
}
const wake = () => { if (!raf && !still) raf = requestAnimationFrame(frame) }
el.addEventListener('pointermove', (e) => {
const r = el.getBoundingClientRect()
el.style.setProperty('--mx', `${e.clientX - r.left}px`)
el.style.setProperty('--my', `${e.clientY - r.top}px`)
if (e.pointerType !== 'mouse') return
tx = (e.clientX - (r.left - x + r.width / 2)) * S
ty = (e.clientY - (r.top - y + r.height / 2)) * S
wake()
})
el.addEventListener('pointerleave', () => { tx = 0; ty = 0; wake() })
})
</script>The story
UX researcher Jared Spool tells it like this: a large online store asked customers to log in or register before checkout. They replaced the “Register” button with “Continue” and a note that nobody needs an account to buy. 45% more customers completed their purchase, worth an extra $300 million in the first year.
Google once tested 41 shades of blue for its links. According to Dan Cobley, then head of Google UK, the winning shade brought in an extra $200 million a year in ad revenue.
The nine details
- Size: 52 px tall, at least 44 px, or thumbs miss.
- Shape: a full pill (border-radius: 999px).
- Type: a real font, Space Grotesk 500.
- Color: almost black, #121214.
- Signal: one red dot with an arrow.
- Hover: the arrow turns 45° in 350 ms.
- Light: a soft glow follows your cursor.
- Magnet: it leans toward you, with a spring.
- Press: it gives a little, scale .97.
Sources
Want details like this on your website?