CSS Button Generator

In short A button's CSS is straightforward — colours, padding, radius, border, shadow — and the part that gets left out is states. A button needs at least four visually distinct ones and most generated buttons ship with two. Hover tells a mouse user the thing is interactive. Active gives the press feedback that makes a click feel like it landed. Disabled has to look unavailable without becoming invisible, which usually means reduced contrast plus `cursor: not-allowed`, never opacity alone. And focus-visible is the one that is routinely forgotten and is not optional: it is what a keyboard user relies on to know where they are, and removing the outline without replacing it is one of the most common accessibility failures on the web. If you dislike the default ring, draw your own with `outline: 2px solid` and an `outline-offset` — but draw something. Two sizing notes. Padding should be set in relative units or the button stops growing when a user increases their text size. And the tap target wants to be around 44px tall on touch devices, which is larger than most desktop-designed buttons and is worth checking on a phone rather than in a browser window.