CSS Button Generator

Design button styles visuallyRuns locally · nothing uploaded

Styles

Button text

Background

Text color

Hover background

Border color

Radius: 8pxBorder width: 0pxHorizontal padding: 20pxVertical padding: 10pxFont size: 15px

BoldShadowGradient background

Hover the preview button to see the hover state

CSS code

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: #2563eb;
  border: 0px solid transparent;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.08);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}
.btn:hover {
  background: #1d4ed8;
}
.btn:active {
  transform: translateY(1px);
}
.btn:focus-visible {
  outline: 3px solid color-mix(in srgb, #2563eb 40%, transparent);
  outline-offset: 2px;
}

Also works as:css button generatorbutton style cssbutton maker

How to use

1Pick a style to start from.
2Adjust colors, radius, padding and more.
3Copy the CSS and add class="btn" to your button.

FAQ

How do I use the CSS?

Add it to your stylesheet and put class="btn" on a button or link.

Is there a focus style?

Yes, a :focus-visible outline for keyboard users.

CSS Box Shadow GeneratorDesign box-shadow visually CSS Gradient GeneratorLinear, radial, conic and random CSS Border Radius GeneratorDesign border-radius visually Password GeneratorStrong random passwords QR Code GeneratorQR codes for text, Wi-Fi, email Random Number GeneratorRandom numbers in any range

Styles

How to use

FAQ

Related tools