Quick answer

Step 1: Add a button with the <button> tag

The <button> element creates a real, clickable button. Whatever you put between the opening and closing tags becomes the label. That can be plain text, or other inline content like an icon or bold text.

1. Type <button>, then the label, then </button>.
2. Add type="button" so the browser knows it’s a plain button and not a form submit button.
3. Open the page. The browser already makes it focusable with the Tab key and clickable with Enter or Space.

Those default buttons look different in every browser and operating system. That’s why almost every site restyles them with CSS, which is the next step.

Step 2: Choose the right type attribute

The type attribute decides what the button does:

• type="button": does nothing by itself. Use it for buttons that run JavaScript.
• type="submit": sends the form it sits in. This is the default when a button is inside a <form> and has no type.
• type="reset": clears every field in the form back to its starting value. Users press it by accident, so it’s rarely a good idea.

Because submit is the default, a button with no type inside a form will submit (and reload) the page when clicked. Always write the type, even when it seems obvious.

Step 3: Style the button with CSS

A good button style changes four things: the colors, the padding (space around the label), the border radius (rounded corners) and the cursor. Then it adds states, so people can see when the button is hovered, pressed or focused with the keyboard.

1. Give the button a class, such as class="btn".
2. Set background, color, padding, border: none and border-radius.
3. Add cursor: pointer so the mouse shows a hand.
4. Add :hover, :active and :focus-visible rules for the different states.

Try changing the background color or the border radius in the example.

Keep the :focus-visible outline. People who use a keyboard rely on it to see which button is selected, and removing it with outline: none is one of the most common accessibility mistakes.

Step 4: Make a link that looks like a button

Buttons do things (open a menu, save, submit). Links go places. If clicking should take someone to another page, use an <a href> and give it the same CSS class as your buttons. Search engines follow links, people can open them in a new tab, and screen readers announce them correctly.

1. Write a normal link: <a href="/editor/">Open the editor</a>.
2. Add your button class and display: inline-block so padding works on it.
3. Remove the underline with text-decoration: none.

Avoid wrapping a <button> inside an <a> (or the other way round). Nesting interactive elements is invalid HTML and confuses keyboards and screen readers.

Step 5: Run JavaScript when the button is clicked

To make a button do something on the page, listen for its click event. Give the button an id, find it with document.getElementById, and attach a function with addEventListener. The example below counts clicks.

You’ll also see onclick="..." written straight into the HTML. It works, but keeping JavaScript in a <script> block (or a separate file) is easier to read and maintain once a page has more than one button.

Disabled buttons and buttons with icons

Add the disabled attribute to switch a button off. It turns grey, can’t be clicked or focused, and is skipped when a form is submitted. Style it with the :disabled selector. For icons, put an inline SVG or an emoji next to the text, and if the button has only an icon, give it an aria-label so screen readers can announce what it does.

Button size and spacing on phones

On a touch screen, fingers are far less precise than a mouse pointer. Make tap targets at least 44 × 44 pixels: padding: 12px 20px on a 16-pixel label is usually enough. Leave at least 8 pixels between neighbouring buttons with gap or margin, so people don’t hit the wrong one. For the main action on a small screen, such as “Sign up” or “Checkout”, a full-width button is easiest to tap. Add it in a media query, so it only applies on narrow screens: @media (max-width: 600px) { .btn-main { width: 100%; } }.

<button> vs <input> vs <a>: which to use

Common mistakes when making buttons

• Leaving out type inside a form. The button defaults to submit and reloads the page. Write type="button" for JavaScript buttons.
• Using a <div> as a button. A clickable div can’t be reached with the Tab key or pressed with Enter. Use a real <button>.
• Using a button to change pages. Use a link for navigation, so it can be opened in a new tab and followed by search engines.
• Removing the focus outline. Restyle it with :focus-visible instead of deleting it.
• Icon-only buttons with no label. Add aria-label so screen reader users know what the button does.
• Buttons that are too small. Aim for at least 44 × 44 pixels on touch screens.

Related HTML tags

Frequently asked questions