HTML Button Generator
Create button markup that looks right and works for everyone. Choose whether it performs an action or goes to another page, pick a style, size, icon and state, and get clean HTML and CSS with a live preview. The generator picks the correct element, keeps an accessible name on icon-only buttons, handles disabled, loading and toggle states properly and warns when the text contrast is too low.
- Runs in your browser
- No sign-up
- Free to use
How to use HTML Button Generator
- Enter the text and choose what the button does.
- Pick a style, size, icon and brand colour.
- Set a state such as disabled, loading or toggle.
- Copy the HTML and CSS into your page.
HTML Button Generator features
Right element
<button> for actions, <a href> for navigation, submit and reset for forms.
Five styles
Primary, secondary, outline, ghost and danger, from one brand colour.
Icons
Inline SVG icons before or after the text, or icon-only with aria-label.
States
Disabled, loading with a spinner and toggle with aria-pressed.
Contrast check
Warns when text and background fall below 4.5:1.
Live preview
See the button rendered with the generated CSS.
When to use HTML Button Generator
- Call-to-action buttons on landing pages.
- Submit buttons for sign-up and contact forms.
- Icon buttons for close, search and menu controls.
- Building a small, consistent button set for a design system.
HTML Button Generator FAQ
Button or link?
If it takes the user to another URL, use a link (<a href>). If it does something on the current page, such as opening a dialog, submitting a form or toggling a setting, use a <button>. Screen readers announce them differently and they respond to different keys.
How do icon-only buttons stay accessible?
The SVG is hidden from assistive technology and the button gets an aria-label with the text you entered, so a screen reader announces “Close dialog, button” instead of nothing.
Should I use the disabled attribute?
It removes the button from the tab order, so some users never find out why it is unavailable. The generator explains when aria-disabled is the better choice.
How big should a button be?
WCAG 2.2 asks for targets of at least 24 by 24 pixels; 44 pixels is the common recommendation for touch screens. The medium size is 44 pixels tall.
What does the visually hidden text do?
It adds context for screen reader users, for example “Download” becomes “Download the 2026 annual report”, without changing the visible design.
Is anything uploaded?
No. The code is generated in your browser.
Accessible buttons in HTML
Buttons are the controls people use most, and getting them wrong is common: clickable divs that keyboards cannot reach, links styled as buttons that do not respond to the Space key, icon buttons that screen readers announce as just “button”. Native elements solve most of this for free, which is why the generator always starts from <button> or <a>.
A <button> is focusable, responds to Enter and Space and is announced as a button. Its type matters inside forms: the default is submit, so a button that only opens a menu should say type="button". A link needs a real href so it can be opened in a new tab, bookmarked and followed by search engines.
Icons are drawn as inline SVG with aria-hidden="true" and focusable="false", so they never become a separate, unnamed stop for assistive technology. When a button shows only an icon, the text you typed becomes its aria-label. Links that open a new tab get hidden text saying so, and the rel="noopener noreferrer" attributes that stop the new page from controlling yours.
States need more than a colour change. A loading button is marked aria-disabled and shows a spinner that slows down for people who prefer reduced motion. A toggle uses aria-pressed so screen readers report on or off, and a disabled link loses its href instead of pretending to be disabled.
The CSS uses custom properties for the background and text colour, so hover styles and variants only change two values. A visible focus outline with an offset shows keyboard users where they are, and the generator computes the contrast ratio of the text against the button so you can fix a colour before it ships.