Design your button's look, then see its default, hover, active and focus states side by side, without needing to hover or click through each one.
Hover, active and focus styles normally only appear while you're actively interacting with an element, which makes them easy to overlook during design. Mirroring the same rules onto separate preview buttons lets you compare all four states at a glance.
The button's resting appearance, and the only state that's a real, fully interactive button.
A slightly darkened background gives clear feedback that the button is interactive.
A further darkened background plus a subtle scale-down while the button is being pressed.
A visible ring around the button so keyboard users can always see which control is focused.
A browser can only apply real :hover or :active styles while you interact with an element. This tool mirrors the same CSS rules onto separate preview buttons using extra classes, so all states are visible at once.
Hover darkens your base background by a small amount and active darkens it further, matching a common, subtle interaction pattern.
It shows the outline that appears when a button receives keyboard focus, which is essential for accessible, keyboard-navigable interfaces.
Yes, the first button in the preview is fully interactive, so you can hover, click and tab to it to see the real states alongside the static previews.
Yes, the copy button generates the base class plus :hover, :active and :focus-visible rules, ready to paste into your stylesheet.
More handy tools from My Panda Toolbox.