133 · Design & Web

CSS Button Generator

Style a button with a live preview, check its contrast and copy complete CSS.

#4f46e5
#ffffff

How to use the css button generator

  1. Set the text, colours and sizes.
  2. Choose filled or outline and a shadow.
  3. Copy the CSS and add class="button" to your link or button.

Accessible buttons

The tool shows the contrast between the text and background. Aim for at least 4.5:1 so everyone can read the label. The CSS includes a visible focus outline for keyboard users, which you should keep.

Examples

White on indigo

Contrast 6.3:1

Outline style

Transparent button that fills on hover

Questions

Can I use it on a link?

Yes. The CSS works on <a> and <button> elements with class="button".