Reusable Button with hover, focus, disabled

WHAT THIS TESTS Whether you reach for semantic HTML and handle interactive states accessibly rather than reinventing a button with divs and CSS tricks.

A GOOD ANSWER COVERS Start with a native button element. It is focusable by default, fires on Enter and Space, exposes the correct role to assistive tech, and supports the disabled attribute, none of which you get free from a div. Style states with pseudo-classes. Use :hover for pointer feedback. For focus, prefer :focus-visible so keyboard users get a clear, high-contrast focus ring while mouse users are not distracted, and never simply remove the outline without replacing it. For the disabled state, use the actual disabled attribute and style with the [disabled] selector or :disabled; the real attribute removes the button from the tab order and prevents clicks, while your CSS lowers opacity and sets cursor not-allowed. Keep variant and size as modifier classes or data attributes so the component stays reusable.

COMMON WRONG ANSWERS A div with an onclick lacks keyboard support, focus, and role unless you add tabindex, role, and key handlers, which is error-prone. Removing the focus outline harms keyboard accessibility. Faking disabled with only a CSS class leaves the button clickable and focusable. Using :focus instead of :focus-visible shows rings on mouse clicks too.

LIKELY FOLLOW-UPS Why :focus-visible over :focus? It targets keyboard focus, improving mouse UX. How do you handle loading state? Add an aria-busy or disabled with a spinner. How to support icon-only buttons? Provide an accessible name via aria-label.

ONE CONCRETE EXAMPLE A button element gets base styles, a :hover darkening, a :focus-visible outline ring, and a [disabled] rule lowering opacity and showing not-allowed cursor. Because it is a real button with the disabled attribute, a disabled Submit cannot be tabbed to or clicked, and keyboard users always see exactly where focus is.