CSS button generator

Customize a button (colors, rounded corners, shadow, text) and see the result live before copying the complete CSS code, ready to paste into your project. 100% local generation in your browser.

Button text

Background color

Text color

Corner radius: 8px

Text size: 16px

Vertical padding: 12px

Horizontal padding: 24px

Drop shadow Bold text

CSS code

.btn {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  background: #2269dd;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

How it works

A well-designed button should be immediately recognizable as clickable, with sufficient contrast between text and background, and a hover effect that confirms interactivity. Adjust each parameter (colors, corner radius, shadow, size) and watch the result live in the preview, then copy the complete CSS code, which automatically includes a :hover state with a darkened shade and a slight lifting effect.

How is the hover color calculated?

The hover color is automatically generated by darkening the chosen background color, ensuring a visible contrast on mouse hover without needing to pick a second color manually.

Is the generated CSS compatible with all frameworks?

Yes, it's standard CSS with no dependency on a particular framework: you can paste it into a regular stylesheet, adapt it as a utility class, or manually convert it to Tailwind styles or styled-components if your project uses them.

The rendering and code are generated in real time in your browser, without any request to a server.