Button generator cropped

The button is a plain <button> with visible text, so its accessible name is the text you see — no inline JavaScript is ever generated. With "Include CSS" on, the HTML uses the class aah-btn and the CSS defines it; with it off, the styles go inline on the button instead, and hover styles are not available (they cannot be written inline).

What is the HTML Button Generator?

The HTML Button Generator is a free online tool that builds a styled HTML button for you — no hand-written CSS needed. You set the text, colours, border, size and hover style, and the tool gives you clean, ready-to-paste HTML and CSS in return. It is made for anyone building a website who wants a button that looks right without wrestling with stylesheets: beginners learning HTML, bloggers adding a call-to-action button, and developers who want a quick, correct starting point.

Every button the tool makes is a plain <button> element with visible text. That matters for accessibility: the text you see is the button’s accessible name, so screen readers announce it correctly. The tool never generates inline JavaScript, and it never hides the text inside an image or an icon alone.

Everything runs in your browser. There is no sign-up, no account, and nothing you type leaves your device.

How to use the HTML Button Generator

  1. Set the Button text. This is the label on the button — the default is “Click me”. Keep it short and action-led, like “Sign up free” or “Download the guide”.
  2. Pick the Button type. Choose button for a button that does nothing on its own, submit for a button that submits a form, or reset for a button that resets a form.
  3. Set the colours. Pick a Background colour and a Text colour with the colour pickers, or type the hex values directly. The defaults are a crimson background (#e62f41) with white text.
  4. Style the border. Set the Border width in pixels, choose a Border style (none, solid, dashed, dotted or double), and pick a Border colour.
  5. Set the shape and size. Border radius controls how rounded the corners are (the default is 8px). Padding top/bottom (12px) and Padding left/right (24px) control how much space sits inside the button, and Font size (16px) controls the text size.
  6. Choose the Width. “Auto” lets the button fit its text, “Full width” stretches it across its container, and “Fixed width” lets you set an exact width in pixels.
  7. Set the hover style. Pick a Hover background colour and leave “Include hover styles” ticked, and the button will change colour when the reader’s mouse is over it. Hover over the live preview to see it work.
  8. Decide about the CSS. With “Include CSS” ticked, the HTML uses the class aah-btn and the tool gives you a separate CSS block that defines it. With it unticked, the styles go inline on the button instead — and hover styles are not available, because hover styles cannot be written inline.
  9. Copy or download. Use Copy HTML, Copy CSS, or Copy HTML + CSS to take both together, or Download HTML and Download CSS to save them as files. Clear wipes the settings; Reset restores the defaults.

Worked example

Say you want a “Sign up free” button for a newsletter. Type Sign up free in the Button text box, leave the type as button, keep the crimson background and white text, and set the Border radius to 24px for a pill shape. The live preview shows the rounded button at once, and the Generated HTML box gives you:

<button type="button" class="aah-btn">Sign up free</button>

The Generated CSS box gives you the matching .aah-btn rule — background colour, text colour, border radius, padding and font size — plus a .aah-btn:hover rule with your hover colour. Paste the HTML where the button belongs, and add the CSS to your stylesheet. If you ticked “Disabled state”, you also get a .aah-btn:disabled rule that fades the button and shows a not-allowed cursor.

Where a styled button actually helps

Call-to-action buttons on a landing page. The button is the one element a visitor is meant to click, so it should stand out. A strong background colour, generous padding and a clear action verb (“Start free trial”, not “Click here”) make it obvious. Build it here, then reuse the same CSS class for every call-to-action on the page so they all match.

Submit buttons in forms. A form’s submit button should look like it belongs to the form, not like a browser default. Set the Button type to submit, match the colours to your site, and the generated HTML drops straight into the form the HTML Form Generator built. Because the tool generates a real <button type="submit">, it submits the form exactly like a hand-written one.

Download and action links styled as buttons. When a link performs an action — downloading a file, for example — a button communicates that better than a plain text link. Style it here with a fixed width so a row of download buttons lines up neatly, and use the “Disabled state” option for a button that is not available yet, so readers can see it is switched off rather than wondering why nothing happens.

Tips for better buttons

  • Check the contrast. White text on a light background is hard to read, and dark text on a dark background is worse. The preview shows you exactly what your readers will see — if the text is hard to read in the preview, it will be hard to read on your site. Aim for a clear difference between text and background.
  • Keep the text short. Two to four words is the sweet spot. “Sign up free” beats “Click here to sign up for our free newsletter today” — and a short label keeps the button a sensible size.
  • Use one style per site. If every button on your page is a different colour and shape, none of them stands out. Pick one style, copy the CSS once, and reuse the aah-btn class everywhere.
  • Do not rely on colour alone for the hover state. The hover colour change is a nice touch, but some readers use a keyboard or a touchscreen and never hover. The button should still look like a button without it — the border, padding and shape do that job.
  • Use the Disabled state honestly. A disabled button should mean “not available right now”, not “click me and find out”. If the action is never available, remove the button instead of disabling it.

Frequently asked questions

Do I need to know CSS to use this tool?

No. Every setting is a form field — a colour picker, a number box or a dropdown. The tool writes the CSS for you. If you do know CSS, the generated code is plain and readable, so you can edit it afterwards: change the class name, add a shadow, or adjust the padding.

What is the difference between “Include CSS” on and off?

With it on, the button’s HTML is a single clean line with the class aah-btn, and the CSS lives in a separate block you add to your stylesheet. That is the better option for a real website, because one class styles every button. With it off, the styles are written inline on the button itself with a style attribute. That is handy for a one-off button in an email or a page where you cannot add a stylesheet — but hover styles are lost, because a hover rule cannot be written inline.

Why does the tool use a class name like aah-btn?

The generated CSS needs a selector to target, and aah-btn is a short, unlikely-to-clash name. You are free to rename it: change class="aah-btn" in the HTML to your own name and change .aah-btn in the CSS to match. Just change both, or the styles will stop applying.

Is the generated button accessible?

Yes, as far as the markup goes. It is a real <button> element with visible text, so screen readers announce the text as the button’s name, and keyboard users can tab to it and activate it with Enter or Space. What the tool cannot do for you is choose good text — “Click here” tells a screen reader user nothing, while “Download the guide” tells them exactly what will happen.

Can I use the button in an email?

You can, but use the “Include CSS” off option so the styles are inline — most email clients strip out <style> blocks and classes, but they keep inline styles. Note that hover styles will not work in email, and some clients round corners differently, so test it in your email client before sending.

Conclusion

A good button is small, clear and honest about what it does — and it should not take twenty minutes of CSS fiddling to build. The HTML Button Generator above gives you one in a few clicks, with accessible markup and code you can read and reuse. Try it with your own text and colours, then use the HTML Form Generator to build the form it belongs in.

Related Tools