CSS Button Generator

A CSS button generator with hover, active and focus states

This CSS button generator builds a complete button style from a handful of controls: a flat or two-color gradient background, text color, font size and weight, padding, border radius, border, a colored shadow and a small lift on hover. Instead of a single rule you get four: the base .button style plus :hover, :active and :focus-visible, so the button responds to mouse, touch and keyboard users without extra work.

The live preview renders a real <button> element, so you can hover it, press it and tab to it before copying anything. Switch the preview background between Light, Dark and Checker to see how the button and its shadow sit on different surfaces.

Example output

With the default settings (teal #0f766e, 12px by 24px padding, 8px radius, colored shadow and lift on hover) the CSS tab contains:

.button {
  display: inline-block;
  padding: 12px 24px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: #0f766e;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.35);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.button:hover {
  background: #0d6861;
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(1px);
}

.button:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 0.45);
  outline-offset: 2px;
}

The HTML tab holds the matching markup, <button type="button" class="button">Get started</button>. The hover color #0d6861 is the base color moved 12% toward black (the Hover darken default), and the focus ring reuses the background color at 45% opacity so it always matches.

Options explained

• Background and Gradient background – a flat color, or a linear-gradient(135deg, start, end) when the gradient box is ticked.
• Text colour, Font size and Font weight – size runs from 10 to 32px; weight is Regular (400), Medium (500), Semibold (600) or Bold (700). The font stack is the operating system's UI font, so the button looks native until your own font-family overrides it.
• Horizontal and Vertical padding – written as one padding: Y X shorthand.
• Border radius – 0 gives square corners; 50px turns a normal-sized button into a pill.
• Border width and Border colour – at 0 the rule is border: none. Combine a border with a white background and colored text for an outline button, which is exactly what the Outline preset does.
• Hover darken – how far the flat background moves toward black on hover, from 0 to 40%.
• Coloured shadow – adds 0 4px 14px in the background color at 35% opacity, which reads softer than a gray shadow.
• Lift on hover – nudges the button up 1px on hover; the active state always pushes it down 1px for a pressed feel.
• Uppercase – adds text-transform: uppercase and letter-spacing: 0.05em, because capitals look cramped at normal tracking.

Presets only change the settings they are about (colors, radius, border, shadow, case), so your label, font size and padding survive when you switch between them.

Tips and common mistakes

• Gradient hovers do not fade. Browsers cannot interpolate between two background-image gradients, so the transition has no effect there and the darker hover gradient appears instantly. For gradient buttons the generator darkens both stops by a fixed 12%; the Hover darken slider applies to flat colors. If you need a smooth fade, animate the opacity of a pseudo-element that holds the hover gradient.
• Check text contrast. White text on a light brand color is a common accessibility failure. Test your pair in the color contrast checker; normal-size text needs at least 4.5:1 for WCAG AA.
• Keep the focus ring. :focus-visible appears for keyboard focus but usually not for mouse clicks, so there is no reason to remove it. Deleting outlines makes the button unusable for keyboard users.
• Use the right element. Use <button> for actions and <a href> for navigation. The generated class includes display: inline-block and text-decoration: none, so it styles links the same way.
• Rename the class if .button collides with a framework such as Bootstrap or your CMS theme.

Generated CSS vs a component library

A UI kit gives you many variants and sizes, but also a lot of CSS you may never use. A generated rule set is a better fit for a landing page, an email-style call to action, a static site or a prototype where you need one or two button styles and full control over the output. For a richer shadow than the built-in one, build it in the CSS box shadow generator, and for multi-stop or radial backgrounds use the CSS gradient generator, then paste the value into the background line.

Privacy

The button CSS is generated in your browser as you move the controls. Nothing you type, including the button text, is sent to a server.