How to Create a Button in HTML

Use the <button> element when you want users to click and trigger an action, such as submitting a form, opening a menu, or starting a script. It is the most flexible and accessible way to add clickable controls to a web page.

What you’ll build or solve

You’ll learn how to create a button in HTML with the correct tag and button type. You’ll also know when to use a regular button versus a submit button.

When this approach works best

This approach is the right choice when users need a clear clickable action on the page.

Common real-world scenarios include:

• Submit buttons in forms
• Menu toggle buttons
• Open modal buttons
• Start lesson buttons
• Add to cart actions

This is a bad idea when the action is simple page navigation. In that case, use an <a> link instead.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add the <button> tag with the correct type

Use the <button> element and set the type based on the action.

<button type="button">Click me</button>

For form submission, switch the type to submit.

<form>
  <input type="email" name="email">
  <button type="submit">Subscribe</button>
</form>

What to look for:

• Use type="button" for clicks that trigger scripts or UI actions
• Use type="submit" inside forms
• The button text tells users what happens next
• Keep the button label action-focused
• Use links instead when the goal is navigation

Examples you can copy

Start lesson button

<button type="button">Start lesson</button>

Form submit button

<form>
  <input type="text" name="name">
  <button type="submit">Send</button>
</form>

Menu toggle button

<button type="button">Open menu</button>

Common mistakes and how to fix them

Mistake 1: Forgetting the type inside a form

What the reader might do:

<form>
  <button>Save</button>
</form>

Why it breaks: buttons inside forms default to submit behavior, which can trigger unexpected form submissions.

Corrected approach:

<form>
  <button type="button">Save</button>
</form>

Use button only when the click should not submit the form.

Mistake 2: Using a button for navigation

What the reader might do:

<button type="button">Go to pricing</button>

Why it breaks: buttons should trigger actions, while links are the correct semantic choice for page navigation.

Corrected approach:

<a href="/pricing">Go to pricing</a>

Mistake 3: Using unclear button text

What the reader might do:

<button type="button">Click</button>

Why it breaks: the label does not explain what action will happen next.

Corrected approach:

<button type="button">Download guide</button>

Use button text that clearly describes the result of the click.

Troubleshooting

If the button submits a form unexpectedly, set type="button".

If clicking the button should open another page, replace it with an <a> tag.

If the button text feels vague, rewrite it as an action, such as “Save changes” or “Start lesson”.

If the button does not match your design, style it with CSS instead of changing the HTML tag.

Quick recap

• Use <button> to create clickable actions
• Use type="button" for UI actions
• Use type="submit" for form submission
• Use clear action-focused button text
• Use links instead when the goal is navigation