The Unwanted Scroller: A Button That Doesn't Know Its Place

My thumb hovered over the screen, ready to tap the ‘Add to Cart’ button. It was a simple act, one I’d performed a thousand times before. But this time, as my finger descended, the page gave a sudden, involuntary shudder. The button I was aiming for vanished, replaced in an instant by a sprawling ‘You Might Also Like’ section. My tap landed squarely on a product for cat furniture. I do not own a cat.

This tiny, jarring event is the work of a villain we encounter every day but rarely name: the unstyled button. More specifically, it’s the consequence of what happens when a button, or any interactive element, hasn’t reserved its space on the canvas of the page. It’s a fundamental piece of the front-end craft that, when overlooked, dismantles the user’s trust in the most intimate way—during an intentional action.

Think of it like a conversation. The page layout is the physical space between you and a friend. When you reach out to shake their hand, you expect their hand to be there. Now imagine their arm suddenly jerking away to point at something interesting behind you just as your hands are about to meet. The violation is visceral. That’s a Cumulative Layout Shift (CLS) event, and the unstyled button is the fidgety friend. The browser has to load the button’s dimensions, perhaps waiting for a custom font or a responsive image to settle, and only then does it understand how much room the element truly needs. This last-minute calculation shoves everything else down, and our aim goes awry.

The Anatomy of a Stable Click

The fix is deceptively simple, an act of thoughtful preparation. It’s about telling the browser about the button’s intentions before it arrives. In CSS, this means defining dimensions. A width and a height. Or, for more dynamic content, using aspect ratios. It’s the digital equivalent of setting a place at the dinner table. The space is reserved, acknowledged, and stable. When the button finally loads—whether it’s adorned with a fancy typeface or a subtle icon—it slips into its pre-allocated spot without disturbing the neighbours.

This isn’t just about preventing mis-clicks. It’s about the subtle texture of reliability. A page that feels solid, that doesn’t flinch under your cursor, builds a quiet confidence. It tells the user that the environment is controlled, that the rules of physics here are consistent. Every time a button stays put, it reinforces a promise. Every time it jumps, it breaks one. We’re not just coding for speed or for a Core Web Vital metric; we’re coding for the expectation of a handshake that doesn’t turn into a missed connection.

So the next time you’re styling a simple button, give it the gift of a defined space. It’s a small act of craftsmanship, a nod to the user’s intention. Because on the web, the smallest promise is the one made between a thumb and a target. And that’s a promise worth keeping.

Notes & further reading

A few pages I came back to while writing this: