HTML Buttons Summary

The HTML button element creates a control that performs an action. Buttons are commonly used to submit forms, open menus, show content, and trigger JavaScript.

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

The Button Element

A button is created with an opening button tag, visible text, and a closing tag.

<button type="button">Show Details</button>

The text inside the button tells the user what the button does. Use clear labels such as “Save Changes,” “Open Menu,” or “Send Message.”

Buttons Perform Actions

Use a button when clicking it performs an action on the current page.

Open or close a menu.
Show or hide information.
Submit a form.
Start, pause, or reset something.
Run JavaScript that changes the page.

A button does not perform most of these actions by itself. HTML creates the control, while JavaScript or a form gives the button its behavior.

Buttons And Links Are Different

Buttons perform actions. Links take users to another page, file, or location.

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

<a href="contact.html">Contact Page</a>

Do not use a link only because you want something that looks like a button. CSS can make a link and a button look similar, but the HTML element should still match what happens when it is used.

The HTML links lesson explains how links move users between pages and locations.

The Type Attribute

The type attribute tells the browser what kind of button you are creating.

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

Use type="button" for a general button that will be controlled by JavaScript or another page behavior.

Submit Buttons

A button with type="submit" submits the form that contains it.

<form>
	<button type="submit">Send Form</button>
</form>

Submit buttons are used after the form fields a visitor needs to complete. The next lesson on forms and inputs explains how those fields work together.

Reset Buttons

A button with type="reset" returns form fields to their starting values.

<form>
	<button type="reset">Reset Form</button>
</form>

Reset buttons can erase information a user has entered, so they are not needed in most forms. Use them only when resetting the entire form is clearly useful.

Always Choose A Button Type

A button inside a form may submit the form when no type is provided. This can cause unexpected behavior when the button was meant to do something else.

<button type="button">Show Help</button>
<button type="submit">Send Form</button>

Writing the type explicitly makes the purpose of each button clear and prevents accidental form submissions.

Disabled Buttons

The disabled attribute prevents a button from being used.

<button type="button" disabled>Unavailable</button>

Browsers usually make disabled buttons look faded. Disabled buttons cannot be clicked or reached with normal keyboard navigation.

Use disabled buttons carefully. A user should be able to understand why the action is unavailable and what must happen before it becomes available.

Button Labels Should Describe The Action

A good button label tells the user what will happen.

<button type="submit">Create Account</button>

Labels such as “Click Here” or “Go” are often too vague. A specific label such as “Download Guide,” “Save Changes,” or “Show Answer” is easier to understand.

Buttons Can Contain Simple HTML

A button can contain text and simple inline elements.

<button type="button">
	<strong>Save</strong> Changes
</button>

Keep the content simple and make sure the visible label still explains the action. Do not place a link, another button, or a form field inside a button.

CSS Controls Button Appearance

HTML creates the button and gives it meaning. CSS controls properties such as color, padding, borders, and rounded corners.

button {
	padding: 12px 20px;
	background: blue;
	color: white;
	border: 0;
}

A button should still look interactive and remain easy to see, read, and use with a mouse, keyboard, or touch screen.

Buttons