How to Add Buttons in HTML

Buttons allow users to perform actions on a web page.

In HTML forms, buttons are often used to submit form data or reset form fields. Buttons can also be used for other actions, such as opening a menu, closing a popup, showing extra content, or triggering JavaScript.

The main element used for buttons is:

1<button>

A simple button looks like this:

1<button type=”button”>Click me</button>

The text between the opening and closing tags is what the user sees on the button.

Introduction

What Is the <button> Element?

The <button> element creates a clickable button.

For example:

1<button type=”button”>Show more</button>

This creates a normal button with the visible text:

1Show more

Unlike the <input> element, the <button> element has an opening tag and a closing tag.

Correct:

1<button type=”button”>Open menu</button>

Incorrect:

1<button type=”button”>

The button text or content should go between the opening and closing tags.

The type Attribute

The type attribute tells the browser what kind of button it is.

The three main button types are:

1type=”submit”

1type=”reset”

1type=”button”

These types behave differently, especially when the button is inside a form.

A submit button submits a form.

A reset button resets form fields.

A normal button does not submit or reset anything by itself.

Submit Buttons

A submit button sends the form data when the user activates it.

For example:

1<form action=”/contact” method=”post”>2  <label for=”name”>Name</label>3  <input type=”text” id=”name” name=”name”>4 5  <button type=”submit”>Send</button>6</form>

When the user clicks the “Send” button, the browser submits the form.

The action attribute tells the browser where to send the form data.

The method attribute tells the browser how to send it.

A Simple Submit Button

The most common form button is a submit button:

1<button type=”submit”>Submit</button>

You can use clearer button text depending on the form:

1<button type=”submit”>Send message</button>

1<button type=”submit”>Create account</button>

1<button type=”submit”>Search</button>

Good button text should describe what will happen.

For example, “Send message” is more specific than “Submit”.

Submit Buttons Inside Forms

Submit buttons are usually placed inside a <form> element.

For example:

1<form action=”/signup” method=”post”>2  <label for=”email”>Email address</label>3  <input type=”email” id=”email” name=”email”>4 5  <button type=”submit”>Sign up</button>6</form>

The button belongs to the form because it is inside the <form> element.

When clicked, it submits the fields in that form.

Reset Buttons

A reset button clears or restores the form fields to their initial values.

For example:

1<form>2  <label for=”search”>Search</label>3  <input type=”search” id=”search” name=”q”>4 5  <button type=”reset”>Clear</button>6</form>

If the user types into the field and then clicks “Clear”, the field is reset.

A reset button uses:

1type=”reset”

Be Careful with Reset Buttons

Reset buttons can be useful in some situations, but they can also be frustrating.

If a user spends time filling out a form and accidentally clicks a reset button, their input may be lost.

For that reason, many modern forms do not include reset buttons unless there is a clear need.

A reset button may be useful for a search or filter form:

1<form>2  <label for=”filter”>Filter results</label>3  <input type=”search” id=”filter” name=”filter”>4 5  <button type=”submit”>Apply filter</button>6  <button type=”reset”>Clear filter</button>7</form>

In this case, clearing the filter may be helpful.

For longer forms, use reset buttons carefully.

Normal Buttons with type="button"

A normal button uses:

1type=”button”

For example:

1<button type=”button”>Open menu</button>

This button does not submit a form or reset fields by itself.

It is usually used with JavaScript.

For example, a normal button might be used to:

1open a menu2close a popup3show more content4switch tabs5start an animation6copy text7toggle dark mode

The HTML creates the button. JavaScript can add the behaviour.

Why type="button" Matters

Inside a form, a <button> without a type attribute may behave as a submit button by default.

For example:

1<form>2  <input type=”text” name=”name”>3  <button>Help</button>4</form>

The “Help” button may submit the form when clicked.

If the button is not meant to submit the form, write:

1<button type=”button”>Help</button>

This prevents accidental form submission.

As a good habit, always include the type attribute on buttons.

Buttons Outside Forms

Buttons can also appear outside forms.

For example:

1<button type=”button”>Open navigation menu</button>

A button outside a form usually needs JavaScript to do something.

For example, it might open a mobile menu or close a modal window.

Without JavaScript, a normal button may be clickable but not perform any visible action.

That is not necessarily wrong, but it means the behaviour has not been added yet.

Button Text Should Be Clear

Button text should tell users what the button does.

Less clear:

1<button type=”submit”>Submit</button>

Often better:

1<button type=”submit”>Send message</button>

Less clear:

1<button type=”button”>Click here</button>

Better:

1<button type=”button”>Show details</button>

Clear button text helps users understand what will happen before they click.

Button vs Link

Buttons and links are different.

Use a link when the user is going somewhere:

1<a href=”contact.html”>Contact us</a>

Use a button when the user is performing an action:

1<button type=”button”>Open menu</button>

Use a submit button when the user is submitting a form:

1<button type=”submit”>Send message</button>

A simple rule is:

1Link = navigation2Button = action3Submit button = form submission

Do not use a <div> or <span> as a fake button.

Using <button> Instead of <input type="button">

HTML also allows button-like inputs, such as:

1<input type=”submit” value=”Send”>

1<input type=”reset” value=”Clear”>

1<input type=”button” value=”Open menu”>

These can work.

However, the <button> element is often more flexible because it can contain text and other inline content.

For example:

1<button type=”submit”>2  Send message3</button>

You can also include an icon or styled text inside a button if needed:

1<button type=”button”>2  <span>Open menu</span>3</button>

For simple forms, either approach can work, but <button> is usually easier to expand and style.

Buttons and Accessibility

Buttons should be understandable to all users, including people using keyboards and assistive technologies.

The <button> element is already keyboard-accessible by default.

Users can usually focus a button with the keyboard and activate it with keys such as Enter or Space.

This is one reason you should use a real <button> element instead of a clickable <div>.

Less accessible:

1<div class=”button”>Open menu</div>

Better:

1<button type=”button”>Open menu</button>

The real button gives browsers and assistive technologies the correct meaning and behaviour.

Buttons with Icons

Some buttons include icons.

For example:

1<button type=”button”>2  🔍 Search3</button>

If the button has both an icon and visible text, the visible text usually gives enough meaning.

If a button only uses an icon, it still needs an accessible name.

For example:

1<button type=”button” aria-label=”Search”>2  🔍3</button>

The aria-label gives the button a text label for assistive technologies.

For most beginner projects, visible text is usually the simplest and clearest option.

Disabled Buttons

A button can be disabled with the disabled attribute.

For example:

1<button type=”submit” disabled>Send</button>

A disabled button cannot usually be clicked or focused.

This can be useful when a button should not be available yet.

For example, a form might disable the submit button until required fields are complete.

However, be careful. If a disabled button is not explained, users may not know why they cannot use it.

Visible instructions can help:

1<p>Please complete all required fields before sending.</p>2<button type=”submit” disabled>Send</button>

Styling Buttons with CSS

HTML creates the button and gives it meaning.

CSS controls how it looks.

For example:

1<button class=”primary-button” type=”submit”>Send message</button>

CSS:

1.primary-button {2  padding: 10px 16px;3  border: none;4  border-radius: 6px;5  cursor: pointer;6}

You can style buttons with colours, spacing, borders, fonts, hover states, and focus states.

However, make sure the button still looks clearly clickable and remains easy to read.

Focus Styles

When users navigate with a keyboard, they need to see which button is focused.

Browsers provide default focus styles, but they are sometimes removed by mistake.

Avoid removing focus outlines without replacing them.

Avoid this:

1button {2  outline: none;3}

If you customise focus styles, make sure they are still visible:

1button:focus {2  outline: 2px solid #3366cc;3  outline-offset: 2px;4}

Visible focus styles are important for keyboard accessibility.

A Contact Form with Submit and Reset Buttons

Here is a simple form with a submit button and a reset button:

1<form action=”/contact” method=”post”>2  <div>3    <label for=”name”>Name</label>4    <input type=”text” id=”name” name=”name”>5  </div>6 7  <div>8    <label for=”email”>Email address</label>9    <input type=”email” id=”email” name=”email”>10  </div>11 12  <button type=”submit”>Send message</button>13  <button type=”reset”>Clear form</button>14</form>

The submit button sends the form.

The reset button clears the form fields.

For a short form, this may be acceptable.

For a long form, think carefully before adding a reset button.

A Button for JavaScript Behaviour

Here is a normal button that could be used with JavaScript:

1<button type=”button” id=”menu-button”>Open menu</button>

The button has:

1type=”button”

so it does not submit a form.

It also has:

1id=”menu-button”

so JavaScript can find it.

For example, JavaScript could later use this ID to open and close a menu.

The HTML button is still useful even before you add the JavaScript, because it gives the action a proper interactive element.

A Complete Example

Here is a complete HTML page using submit, reset, and normal buttons:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>Button Example</title>6</head>7<body>8 9  <h1>HTML Button Example</h1>10 11  <button type=”button”>Open menu</button>12 13  <form action=”/contact” method=”post”>14    <div>15      <label for=”name”>Name</label>16      <input type=”text” id=”name” name=”name”>17    </div>18 19    <div>20      <label for=”email”>Email address</label>21      <input type=”email” id=”email” name=”email”>22    </div>23 24    <button type=”submit”>Send message</button>25    <button type=”reset”>Clear form</button>26  </form>27 28</body>29</html>

This example uses:

1<button type=”button”>

for a normal button,

1<button type=”submit”>

for a submit button,

and:

1<button type=”reset”>

for a reset button.

Common Mistake: Forgetting the Button Type

A common mistake is writing a button inside a form without a type attribute.

Risky:

1<form>2  <input type=”text” name=”name”>3  <button>Help</button>4</form>

The button may submit the form.

Better:

1<form>2  <input type=”text” name=”name”>3  <button type=”button”>Help</button>4</form>

Always include the button type so the behaviour is clear.

Common Mistake: Using Reset Buttons Too Freely

A reset button can erase user input.

Avoid adding reset buttons to long forms unless users clearly need that option.

Less careful:

1<form>2  <input type=”text” name=”first-name”>3  <input type=”text” name=”last-name”>4  <input type=”email” name=”email”>5  <textarea name=”message”></textarea>6 7  <button type=”submit”>Send</button>8  <button type=”reset”>Reset</button>9</form>

A user could accidentally erase everything.

If you do include a reset button, use clear text:

1<button type=”reset”>Clear form</button>

This is clearer than just “Reset”.

Common Mistake: Using a Link as a Button

If the user is performing an action, use a button.

Less appropriate:

1<a href=”#” class=”button”>Open menu</a>

Better:

1<button type=”button” class=”button”>Open menu</button>

Use links for navigation.

Use buttons for actions.

Common Mistake: Using a Div as a Button

Avoid this:

1<div class=”button”>Send message</div>

A <div> is not a real button. It does not have the same built-in keyboard and accessibility behaviour.

Better:

1<button type=”submit”>Send message</button>

Use real button elements for button actions.

Common Mistake: Vague Button Text

Button text should describe the action.

Weak:

1<button type=”submit”>Go</button>

Better:

1<button type=”submit”>Search</button>

Weak:

1<button type=”button”>Click here</button>

Better:

1<button type=”button”>Show delivery options</button>

Clear button text helps users understand what will happen.

Best Practices

Use <button> to create clickable buttons.

Always include the type attribute.

Use type="submit" to submit a form.

Use type="reset" to reset form fields.

Use type="button" for normal buttons that do not submit a form.

Use clear button text.

Use links for navigation and buttons for actions.

Be careful with reset buttons because they can erase user input.

Use real <button> elements instead of clickable <div> elements.

Keep buttons keyboard accessible.

Do not remove focus styles unless you replace them with visible alternatives.

Use CSS to style buttons, but keep them recognisable and readable.

Summary

The <button> element creates a clickable button in HTML.

A normal button looks like this:

1<button type=”button”>Open menu</button>

A submit button sends a form:

1<button type=”submit”>Send message</button>

A reset button clears or restores form fields:

1<button type=”reset”>Clear form</button>

The type attribute is important because it controls the button’s behaviour.

Use submit buttons for forms, reset buttons only when clearing fields is genuinely useful, and normal buttons for actions handled by JavaScript.

Use clear button text and real button elements to make your HTML more understandable, accessible, and reliable.