Loading page
About this tool
Create premium CSS buttons visually. Tweak fonts, borders, shadows, hover animations, gradients, and export HTML/CSS.
CSS Button Generator builds a complete `.custom-button` rule plus a matching `:hover` rule from visual controls for padding, font size and weight, border radius, border, solid or 135° linear-gradient background, box-shadow depth and opacity, and hover scale. It is for developers and designers who want the hover state generated for them rather than hand-writing a second block. The preview is a real button you can hover, and the export includes both the CSS and the HTML snippet that uses it.
Open CSS Button Generator on AltFTool — it loads instantly in your browser.
Type your label into Button Text Content, set Background Mode to Solid Fill or Linear Gradient, then pick Color 1 and Text Color; choose Color 2 when you use Linear Gradient.
Size the button with the Padding H, Padding V, Font Size and Corner Radius sliders, and type a Border Width in pixels.
Set Hover Scale between 0.95x and 1.15x and hover the Interactive Preview to test it, then press Copy for the .custom-button CSS or Download to save custom-button-styles.txt.
The exported CSS includes a `:hover` block with the scale transform and a deeper shadow derived from your base values, so the two states stay consistent.
A single depth control sets the y-offset and a blur of twice that value, which keeps the shadow physically plausible instead of letting the two drift apart.
Neon gradient pill, outline, dark and retro presets set background, radius, border and shadow together, so you begin from a coherent style rather than defaults.
Yes. Every export contains two rules: the base `.custom-button` and a `.custom-button:hover` that applies `transform: scale(...)` and increases the shadow by 2px of depth and 0.05 of opacity over the base values. Both share a `transition: all 0.2s ease-in-out`.
Set the border radius to a value at least half the button's height — 9999px is the usual trick, and it is what the neon preset uses. Anything that large clamps to a perfect semicircle on each end regardless of the button's actual height.
A two-stop `linear-gradient(135deg, colour1 0%, colour2 100%)`, which runs diagonally from top-left to bottom-right. Switching to solid mode replaces it with a plain `background-color` using the first colour only.
A single text file containing the full stylesheet for both states plus the matching `<button class="custom-button">` markup with your button label, so the snippet works as soon as it is pasted. You can also copy just the CSS to the clipboard.