CSS Button Generator
Style it visually, hover it in the live preview, then copy clean HTML + CSS — or grab it as a PNG for email.
Every landing page, newsletter and blog post eventually needs a decent-looking button, and hand-writing the CSS — padding, radius, hover state, shadow — is fiddly even when you know how. This generator does it visually: pick colors (solid or gradient), set the size, roundness, border and shadow, and watch the live preview update as you go. Hover over the preview and the hover color works too, because the generated code uses a proper CSS class rather than inline styles.
When it looks right, take it two ways. Copy code gives you a clean, self-contained snippet — a small <style> block plus the <a> tag — that pastes into any HTML page, WordPress custom-HTML block, Shopify page or site builder that accepts code. Download as PNG renders the identical button as a crisp retina image for the places that don't allow custom code at all, most notably email editors. Four one-click presets (solid, gradient, pill, outline) give you a professional starting point. Like everything on this site, it all runs in your browser. Need the destination link tidied up first? The slug generator cleans URLs, and the color palette extractor pulls matching colors from your logo.
How to use the Button Generator
- Start from a preset — Solid, Gradient, Pill or Outline — or dive straight into the controls.
- Set the button text and the URL it should link to, then tune colors, size, padding, corners, border and shadow. Mouse over the preview to test the hover color.
- Click Copy code and paste the snippet into your page or template.
- For email or platforms that block custom code, click Download as PNG and insert the image with a link instead.
Frequently asked questions
Why does the code use a CSS class instead of inline styles?
Hover effects can't be written inline — CSS pseudo-classes like :hover only work from a stylesheet or <style> block. The class-based snippet keeps the hover color working and is also cleaner to maintain. If you're adding several buttons, move the CSS into your stylesheet once and reuse the class.
Will the button work in WordPress, Shopify or Wix?
Yes — anywhere you can paste HTML: a Custom HTML block in WordPress, page/theme code in Shopify, or an embed/code element in Wix and Squarespace. Paste the whole snippet including the <style> block and it's self-contained.
Can I use the generated button in an email?
Not the CSS version — most email clients strip <style> blocks and ignore many CSS properties. That's exactly what the PNG download is for: insert the image in your email and link it to your URL. The PNG renders at 2× resolution so it stays sharp on retina screens.
Why is my button's HTML an <a> tag and not a <button>?
Because most "buttons" on marketing pages are really links — they navigate somewhere. An <a> styled as a button is correct for that. Reserve the <button> element for actions inside forms and apps; you can copy the CSS onto a <button> selector unchanged if that's your case.
Is the generated code accessible?
The structure is — a real link with real text that screen readers announce properly. The part you control is color contrast: aim for a contrast ratio of at least 4.5:1 between text and background (white on this site's default green passes). Very light text on very light backgrounds fails users with low vision.