Why does it show a contrast ratio?

Because a button with an illegible label is the single most common accessibility failure in a design system, and it is invisible until an audit finds it. Anything below 4.5 to 1 fails WCAG AA for normal sized text.

Will the preview match my site exactly?

The colours, shape and proportions will. The text will not, because the preview draws in your system font and your site will use whatever font you have loaded. The padding and radius are exact.

Where are the hover and focus states?

Not here. They are a real part of a button and they need more than a colour picker to do properly, so rather than generate something you would have to rewrite, the rule stops at the resting state.

CSS Button Generator

A button, its CSS, and whether the label is legible.

Label

Background

Text colour

Corner radius

Side padding

Top and bottom padding

Font size

A button, its CSS, and whether the label is legible.

How to use it

Write the label. The preview sizes itself around it as you type.
Set the colours and shape. The label contrast is graded against WCAG AA underneath, as you change them.
Copy the rule. A complete class you can paste into a stylesheet.

When you would use this

Most button generators give you a rule and leave out the thing most likely to be wrong with it, which is whether anyone can read the label. This grades the label against its background as you change either one, using the same WCAG 2.2 arithmetic an accessibility audit will use. Below 4.5 to 1 fails AA for normal text, and finding that out here costs nothing where finding it out later means changing a colour that has already spread through a design system. The rest is what you would expect: padding on both axes separately, a corner radius, a font size, and a complete class to paste. The preview is drawn from the same numbers, so the proportions are exact. One honest limitation: the text in the preview renders in your system font, not the font your site loads, so treat the label width as approximate. Everything else, the colours, the radius, the padding, is exactly what the CSS will do.

Questions

Why does it show a contrast ratio?: Because a button with an illegible label is the single most common accessibility failure in a design system, and it is invisible until an audit finds it. Anything below 4.5 to 1 fails WCAG AA for normal sized text.
Will the preview match my site exactly?: The colours, shape and proportions will. The text will not, because the preview draws in your system font and your site will use whatever font you have loaded. The padding and radius are exact.
Where are the hover and focus states?: Not here. They are a real part of a button and they need more than a colour picker to do properly, so rather than generate something you would have to rewrite, the rule stops at the resting state.