Classic Blue CSS Button
Solid · Rounded
253 presets · MIT licensed · no sign-up
CSS Button Generator
Start from a hand-written button style instead of an empty canvas. Change the label, class name, color, corner radius and size, watch the result on the background it will actually ship on, then copy the code as CSS, HTML, React, styled-components or SCSS.
Customize a button and copy the code
CSS · HTML · React · Styled · SCSSText
Class name
Color hue
Radius · 12px
Size
.btn-sunset {
display: inline-block;
padding: 13px 28px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
color: #ffffff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-sunset:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4);
}
.btn-sunset:active {
transform: translateY(0);
box-shadow: 0 4px 10px rgba(236, 72, 153, 0.3);
}
.btn-sunset:focus-visible {
outline: 2px solid #f97316;
outline-offset: 3px;
}
Loaded with the Sunset preset. Every style in the catalog opens in the same workbench.
Browse all 253 styles →What you can change
The generator edits the stylesheet itself, not a screenshot of it. Every control below rewrites the CSS you copy, so the code you paste is the button you just looked at.
Six preview backdrops
Put the button on the style's own background, or on a dark, light, colored, photographic or article-text surface. You can drop in your own image too — it is read locally in the browser and never uploaded.
Pinned hover state
The hover toggle holds the button in its hover state, so you can read a transition or an animated border without keeping the pointer still.
Label and class name
Change the visible text, then rename the CSS class. The rename covers every occurrence — selectors, keyframe names and the animation references that point at them — so the snippet stays self-consistent.
Color hue
Pick a hue and every saturated color in the stylesheet rotates to it, keeping its own saturation, lightness and alpha. Neutral grays, near-white and near-black stay put, so shadows, borders and label text survive the change.
Corner radius
A 0–48px slider plus a pill toggle that jumps to fully rounded corners. Both rewrite the border-radius declarations in the exported CSS, not just the preview.
Size
S, M and L scale every px value inside padding, font-size, width and height by 0.85, 1 and 1.2 — the proportions of the original design are preserved.
Five ways to export the same button
Every tab is generated from the CSS you just customized: a hue shift or a size change is already baked into the CSS, SCSS and styled-components output, while the HTML and React tabs carry the class name and label you chose. One click copies the active tab to the clipboard.
CSSThe complete stylesheet for the customized button: base class, hover and active rules and any keyframes. A minify switch collapses it to a single line.
HTMLThe markup to go with it — a native button element carrying your class name and label.
ReactA Button.jsx component that imports Button.css, defaults its children to your label and spreads the remaining props onto the element.
styled-componentsA styled.button template. Keyframes are lifted into keyframes consts and referenced by interpolation; at-rules such as @property move into a ButtonGlobals createGlobalStyle you render once.
SCSSThe same rules nested under the class with & parent selectors, while keyframes and other at-rules stay at the top level.
Where the controls stop
The radius control needs a simple single-value border-radius in the source CSS. It is available on 228 of the 253 styles; on the other 25 — asymmetric corners, percentage radii and organic shapes — the slider is disabled and marked n/a, because rewriting those values would break the silhouette the style is built on. Every other control stays live, and you can still adjust the corners by hand in the exported CSS.
The generator also customizes existing designs rather than composing arbitrary CSS from scratch: you pick the direction from the catalog, then tune it.
Before you ship the result
Keep the native button element, check the label and focus contrast against your real background rather than the preview stage, and add a visible :focus-visible state. If you keep the motion, pair it with a prefers-reduced-motion override. A generated style is a visual starting point, not an accessibility audit.
Starting points
Start from a preset
Midnight CSS Button
Solid · Rounded
Sunset CSS Button
Gradient · Rounded
Oceanic CSS Button
Gradient · Rounded
Outline Blue CSS Button
Outline & Ghost · Rounded
Outline Dark CSS Button
Outline & Ghost · Rounded
Pushable Crimson CSS Button
3D & Tactile · Rounded
Pushable Azure CSS Button
3D & Tactile · Pill
Neo Raised CSS Button
Neumorphic · Rounded
Neo Pressed CSS Button
Neumorphic · Rounded
Glass Frost CSS Button
Glassmorphism · Rounded
Glass Dark CSS Button
Glassmorphism · Rounded
Neon Cyan CSS Button
Neon & Glow · Rounded
Neon Magenta CSS Button
Neon & Glow · Rounded
Windows 95 CSS Button
Retro · Square
Terminal Green CSS Button
Retro · Square
Brutal Yellow CSS Button
Brutalist · Rounded
Brutal Pink CSS Button
Brutalist · Square
Lavender Dream CSS Button
Pastel · Rounded
Mint Cream CSS Button
Pastel · Rounded
Dark Elevated CSS Button
Dark UI · Rounded
Dark Primary Glow CSS Button
Dark UI · Rounded
Letter Space CSS Button
Minimal · Rounded
Wave Line CSS Button
Minimal · Square
Hexagon CSS Button
Futuristic · Cut Corner
Notch Corners CSS Button
Futuristic · Cut Corner
Comic Book CSS Button
Playful · Rounded
Tilt Fun CSS Button
Playful · Rounded
Or open a whole collection
Each collection groups the styles that share a visual language, with notes on where the treatment works best. Any style you open there loads into this same generator.
CSS button generator FAQ
Is the CSS button generator free?
Yes. Every one of the 253 styles opens in the same workbench with no account, sign-up or export limit. ButtonCraft Pro is a separate paid product for matching UI kits; it does not gate anything in the generator.
What can I change in the workbench?
Colour, corner radius, a pill toggle, size, the button's label and its CSS class name. The generator rewrites the style's own stylesheet rather than layering overrides on top, so what you copy is the whole rule and nothing depends on ButtonCraft at runtime.
Can I share a customized button?
Yes. The workbench keeps your changes in the address bar, so copying the link and sending it reproduces the exact button you were looking at — no account and nothing saved on our side.
Which formats can I export?
Plain CSS and HTML, a React component, styled-components and SCSS. The CSS can also be minified, and any button can be opened in CodePen in one click.
Licensing, browser support and framework questions are answered once, on the ButtonCraft FAQ.
Need the rest of the interface to match the button you generated?
See matching UI kits →