Buttons

Published July 20, 2026

Back in my day, buttons used to look like buttons.

Windows 9x

This is pretty good. The buttons look like buttons. The focus state is clear, and the disabled state is obvious. The main downside is that all the buttons have equal weight. OK is the primary action and should be more prominent than the secondary actions.

Aqua and XP

For a brief moment, the world thought everything should be shiny. Apple almost pulled it off. I don't know why they wanted stripes in the background, though. Microsoft brought us XP which looked like a clown car crashed into a jelly bean store and everything got all smooshed together.

There is a UX improvement here, though, which is that the primary action is now distinct.

Flat earthers

At some point, it was phat to be flat.

This looks cleaner. There's less visual clutter and distraction, but we have lost something. We still have good focus states and disable is distinct. But, they no longer quite look pressable like the buttons of yore. The primary action is still distinct, though.

The input button

Then, for some reason, Apple decided that secondary buttons should just look like an input, and everyone followed suit. It looks prettier than the flat gray buttons, but we have lost clarity. Is "Apply" a disabled button, or a narrow input with placeholder text? Click to find out, I guess!

Click random text, and pray...

Some designers decided that secondary actions should be even more subtle, and we got this.

This looks even cleaner, but now Cancel is not an obviously interactive element. It just looks like text. It's probably my favorite aesthetically- very zen-like- but it's not a good UX. You're training your users to click on random text in your app in order to discover interactive elements.

GOV.UK

That brings us to the gov.uk design system. The buttons have a hint of elevation, and depress nicely when active. The input is clear and labeled properly rather than relying on placeholder text (which is something of an anti-pattern). Focus is bright and in-your-face.

I think the designers at gov.uk would recommend dropping the cancel and apply button, and instead opt for a back link and a single primary action.

And there we have it: a useable form.

Focus

The strangest thing about the UK.GOV styles is their focus styling. I don't think I've ever seen any other site change the background style rather than simply putting a ring around the focused item.

It is easy to track the focus as it moves across the screen. But, the yellow is similar to the browser's default style for mark, and I suspect it would get confusing on any document where the mark tag was used heavily.

On the other hand, after using it for a while, it has grown on me. Any time I try to improve on its focus state (e.g. by changing it to the more standard blue ring from the previous examples) I find that I miss the clarity of the bright yellow.

Conclusion

The UK.GOV design isn't the prettiest, but in my opinion, it is the most usable of the designs we've explored here. Everything that is interactive *looks* interactive. There is a clear distinction between inputs, buttons, and links. The focus styling is unusual, but clear. The buttons feel pressable and have a nice active state.