Four Looks for One Button: Auditing the Interaction States Your Visitors Actually Meet

Most of us design a button the way we photograph a house: from the front, in good light, with nobody living in it. The resting state gets all the attention. Then a real visitor turns up, moves a mouse, presses Tab, taps with a thumb on a bus, and the button either responds with intent or shrugs. That gap between the designed look and the lived-in look is where small UK brands leak trust at the exact point of action.

At Perfect Pixel Media we care about sharper visual communication for small brands, and this is one of the least glamorous, highest-return audits you can run. No design system required. You need twenty minutes, a keyboard, and a way to screenshot what you see.

Why the resting state gets all the love

A button at rest is easy to approve. It sits still, looks neat in a brand board, and survives a client presentation. Hover, focus, pressed and disabled states are messier because they only appear when someone uses the thing. They are also the states that tell a visitor what is about to happen, what just happened, and whether the site is paying attention.

For a small UK shop or service site, that matters more than another hero image. The customer is often one thumb away from abandoning a basket or closing a contact form. If the interface gives no visual receipt for their action, doubt creeps in. Did that register? Was that the right button? Is this site held together with tape?

Start with the keyboard, not the mouse

Open your site and put the mouse away. Press Tab. Keep pressing it through the header, navigation, body links, form fields and footer. At every stop, ask a simple question: can I see where I am?

If the answer is no, you have an invisible focus state. This is common when someone has removed the browser outline to make things look tidy and never replaced it. The fix is not to bring back a harsh default outline on every element. The fix is a deliberate focus style: a visible ring, an offset outline, a background change, or a combination that survives whatever sits behind it.

WCAG 2.2, the current accessibility guidance, expects focus indicators to be clearly visible. A useful rule of thumb is a ring at least two pixels thick with a contrast ratio of at least 3:1 against the adjacent colours. You do not need to quote chapter and verse in a client meeting. You do need to test focus on pale backgrounds, dark heroes, brand-coloured panels and busy photography. One ring colour will not always survive all four.

Also check that a sticky header does not sit on top of the focused element when someone tabs through. If the focus ring disappears under a fixed navigation bar, keyboard users lose their place.

The hover state is a hint, not a headline

Hover is the state most likely to be over-designed. A button that leaps, rotates or changes shape on hover can feel clever in a portfolio and chaotic in a checkout. The job of hover is simpler: confirm that something is interactive. A small colour shift, a slightly darker background, an underline on a text link, or a gentle lift is usually enough.

Check your body links first. If hover removes the underline and relies on colour alone, that is a problem for anyone who cannot distinguish the two colours. On a small UK brand site, body links are often the quiet workhorses that carry people from a blog post to a product page. They deserve a clear hover cue.

Then test on a touchscreen. Hover does not exist in the same way on a phone, and some browsers can leave a hover style stuck after a tap. If your mobile navigation or product card depends on hover to reveal information, that information is effectively hidden for many visitors.

Pressed and active: give the tap a receipt

The pressed state is the one people feel. When a thumb hits a button on a phone, the response should be immediate and physical: a slight darkening, a small inset shadow, a quick scale change, or a clear colour shift. It does not need to be theatrical. It needs to say: I felt that.

A common mistake is turning off the browser’s tap highlight without replacing it. Another is using a pressed style that shifts the layout, causing the page to jump under the finger. Keep the feedback inside the element’s own box where possible. If you use a transform, check that it does not blur text or clip against a container edge.

Test the most important actions on a real phone: add to basket, submit an enquiry, apply a discount code, open a menu. If the pressed state is missing on any of them, fix that before you add another decorative animation elsewhere.

Disabled states need a reason

A greyed-out button is a visual dead end. It tells someone they cannot proceed, but not why. On small UK sites, disabled buttons often appear in checkout or booking flows where a required field has been missed. If the only feedback is a pale button, the customer has to guess what went wrong.

Where you can, keep the button enabled and show a clear validation message on press. Where a disabled state is genuinely necessary, pair it with nearby text that explains the condition. Check the contrast too. Disabled controls are often exempt from some accessibility contrast rules, but that does not make a ghost button with pale grey text easy to understand.

The same logic applies to disabled form fields. If a field is locked, say why. A tiny padlock icon with no label is not an explanation.

A twenty-minute audit you can run this week

Pick five key actions across your site: a primary call to action, a text link in body copy, a form field, a navigation item and a disabled or secondary button. For each one, capture the resting, hover, focus, pressed and disabled states where they apply. Put the screenshots side by side.

Then run three passes. First, a keyboard pass: can you see focus at every stop? Second, a touch pass on a real phone: does every tap produce visible feedback? Third, a brand pass: do these states feel like they belong to the same site, or has each one been left to the browser’s defaults?

You will usually find two or three quick wins. A missing focus ring on the newsletter form. A hover effect that only works on desktop. A pressed state that is invisible on the main call to action. Fix those before the next campaign, not after.

What good looks like

The goal is not a dramatic redesign. It is a consistent interaction language. A focus ring that appears reliably. A hover cue that confirms without shouting. A pressed state that gives immediate feedback. A disabled state that explains itself. None of these will win a design award on their own, but together they make a small brand feel considered at the exact moment someone decides whether to trust it.

You can borrow principles from public-sector design systems such as the GOV.UK Design System, which has spent years testing focus and error states with real users. You do not need to copy its visual style. You do need to take the lesson seriously: the states you never see in a brand presentation are the ones your visitors meet most often.

If your button only looks good at rest, it is not finished. Give it four looks, test them on a keyboard and a phone, and let the interface do the quiet work of earning trust.