The Button That Moved Four Pixels

The button gave a tiny sideways shudder when it was clicked.

I had already been through a round of fixes on the checkout page. A senior developer had sent back four notes. The little plus and minus controls were not stepping the way they should. The bar pinned to the bottom of the page did not line up with the rest of the page. Some event cards did not take people where the rest of the site taught them to expect. A price button used the wrong font.

None of those problems was dramatic. Nobody had lost money. The checkout did not crash. But a checkout page asks people to trust it at the exact moment they are deciding whether to hand over their card. Little things matter there. A crooked frame on a front door does not stop the door from opening, but it does make you wonder what else was put together in a hurry.

I fixed the notes and thought we were done.

That was the first thing that did not work: calling the page finished because it looked fine after the obvious repairs. It cost us another round of review, and it spent another person’s patience. Someone had to click the button, notice the movement, and say, in effect, “This is still not right.”

The movement was only four pixels. A pixel is one of the tiny dots that make up what you see on a screen. Four of them is not much. Yet the button grew on its right side when someone pressed it. The words inside could also wrap differently, making the button’s height jump. It looked like a small shrug.

That is the sort of thing a still screenshot can hide. The button at rest looked normal. The button after a click looked normal. The awkward part was the trip between the two.

The cause was a border. The quiet version of the button had no border around it. The clicked version added a border two pixels thick on each side. The page treated that border as extra room, so the button became four pixels wider. At the same time, the text had enough room to change its wrapping, so the button could get taller too.

There was one technical term in the fix: box-sizing. It is simply a setting that tells the page whether a border belongs inside the size you gave a button or gets added on outside. We set it so the border stayed inside. We also gave the button an invisible two-pixel border in its normal state, so it was already saving the room it would need when clicked. A minimum width of 320 pixels kept the label on one line. The result was a button that stayed exactly 320 by 90, whether it was sitting there or being pressed.

That was five small lines of styling instructions. The hard part was not writing them. The hard part was noticing that they were needed.

I keep coming back to that because it changes how I think about work made with AI. The machine can get a page most of the way there quickly. It can make something that looks believable at first glance. That is useful. It also means I cannot treat believable as finished.

AI did not create a disaster here. It created a plausible answer and missed the part that only appeared when a person used the page. A person in a real browser switched the button from one state to another and saw the change. That is not busywork after the smart part. It is the smart part that remains.

The same pattern shows up far from a checkout page. A form can look tidy until someone uses a long last name. A phone menu can look fine until a tired person tries it with one thumb. An automated email can read perfectly until it lands after the event it was supposed to remind someone about. The first version can be good. The moment of use can still reveal what the first version could not see.

So I do not think the lesson is that AI is bad at making pages. It is fast at making pages. The lesson is that someone still has to use the actual thing, not just approve the idea of it.

The whole fix was five lines: box-sizing set to keep the border inside the box, an invisible two-pixel border reserved in the resting state, and a minimum width so the label couldn’t rewrap. None of those five lines get written by looking at the button. They get written by clicking it in a real browser and watching what happens in the half second between the two states, not just at either end of it.

dxdev LESSON · paste into your AI coding agent
LESSON: A border added only on the active state shifts a button's box unless the size is reserved in every state up front
SOURCE: dxdev.com/blog/2026-04-27_button-that-moved-four-pixels
WHAT HAPPENED: A checkout button gained a two-pixel border only in its clicked state. Because box-sizing was not set to keep the border inside the button's given dimensions, that border added four pixels of width on click, and the extra room could let the label's text re-wrap, changing the button's height too. The defect was invisible in a still screenshot of the resting button or the clicked button; it only appeared in the transition between the two, which is exactly the moment a checkout page is asking someone to trust it. The fix was five lines: box-sizing set to keep borders inside the box, an invisible two-pixel border reserved in the resting state so nothing changes size on click, and a minimum width to stop the label re-wrapping.
THE RULE: A state-dependent style, hover, active, or focus, that adds size such as a border, outline, or padding will shift the element's box unless that size is reserved in every state up front; the defect only shows up in the transition between states, never in a static view of either one.
CHECK MY CODE, then report PASS or FAIL with file:line for each:
      1. Any :hover, :active, or :focus style that adds a border, outline, or padding that is not also reserved, invisibly, in the element's resting state.
      2. Any interactive element whose box-sizing is not explicitly set when its visual states differ in border or padding.
      3. Any UI review that only compared static screenshots of each state, never by actually triggering the transition between them in a real browser.
THEN PRINT: a table (check, PASS/FAIL, evidence, fix) + a verdict (applies / partially / OUT_OF_SCOPE / no) + the single most important next action.