CSS Button Generator
Design a button and copy the CSS, with a live hover preview.
22px
11px
8px
15px
0px
Live preview (hover it)
CSS
.button {
background: #6366f1;
color: #ffffff;
padding: 11px 22px;
border: 0px solid #000000;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
.button:hover {
background: #4f46e5;
}Styling buttons with CSS
A good button is mostly padding, a clear background color, a readable text color, and a subtle :hover state. This generator wires those into a single rule plus a hover rule, with a transition so the color change feels smooth. Adjust the controls, hover the preview, and copy the CSS — all in your browser.
More CSS tools: the gradient generator, the box-shadow generator, and the border-radius generator.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.