User guide
A good button combines a contrasted background, comfortable padding, a :hover state and a :focus-visible ring for accessibility.
- Primary: main action.
- Outline / Ghost: secondary actions.
- Gradient: marketing emphasis.
FAQ
Why include :focus-visible?
It shows a focus ring only for keyboard navigation, meeting WCAG accessibility rules without bothering mouse users.
What minimum height is recommended?
Aim for at least 44–48px tall to guarantee a comfortable touch target on mobile.