HTML button generator with styles, focus ring and aria-label

How to use the HTML button generator

1. Type the Button text.
2. Choose the Type: button, submit or reset.
3. Pick a Style: Primary, Secondary, Outline, Danger or No CSS, and an Accent colour for the primary and outline styles and the focus ring.
4. Optionally fill id, name, aria-label (for icon-only buttons) and onclick, and tick Disabled.
5. Copy the code and try the button in the Preview, including with the Tab key.

What it does and when to use it

Many sites build buttons from div or span elements with a click handler. Those cannot be reached with the Tab key, do not respond to Enter or Space, and are not announced as buttons. A native button element does all of that for free. This tool gives you the native element with a clean class-based style, so you only need to paste it in.

The CSS covers the states people forget: a :focus-visible outline for keyboard users and a :disabled look with a not-allowed cursor. Primary uses your accent colour with white text; Outline uses it for the text and border; Secondary is grey and Danger is red (#b91c1c).

To pick or convert the accent colour, use the HTML Color Code Generator. To place the button in a form with labelled fields, use the HTML Form Generator. For a button that only navigates, use the HTML Link Generator instead.

How it works

The tool writes a style block with a shared .btn rule (inline-flex, padding, 8 px rounded corners, 600-weight system font) and one variant rule such as .btn-primary, followed by the button with the classes btn btn-<style>. No CSS leaves out the style block and the classes. Text and attribute values are HTML-escaped. It runs in your browser.

Worked examples

The default primary button:

<button type="button" class="btn btn-primary">Download report</button>

It comes with .btn-primary { background: #0f766e; color: #fff; border-color: #0f766e; } and a focus ring in the same teal.

An icon-only close button, outline style in purple, with an id:

<button type="button" id="close-btn" class="btn btn-outline" aria-label="Close dialog">×</button>

Without the aria-label, a screen reader would announce “times” or nothing useful.

A plain submit button. No CSS, type submit and Disabled give <button type="submit" disabled>Download report</button>.

Limits and tips

• The onclick field adds an inline handler. In larger projects, attach events in your script file instead.
• If several buttons share a page, include the style block once.
• Check that white text on your accent colour has enough contrast, especially with light colours.