HTML Buttons Summary

The HTML <button> element creates a control a user can press to perform an action.

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

A button has an opening tag, visible content, and a closing tag. The visible text should tell the user what the button does.

Buttons Perform Actions

Use a button when clicking it performs an action on the current page, such as submitting a form, opening a menu, showing content, or running JavaScript.

A button does not perform most actions by itself. HTML creates the control, while a form or JavaScript 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">Show Help</button>
<button type="submit">Send Form</button>
<button type="reset">Reset Form</button>

Use type="button" for a general button controlled by JavaScript or another page behavior. Use type="submit" for a button that submits a form. Use type="reset" only when clearing the whole 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.

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

Writing the type explicitly makes the purpose of each button clear and prevents accidental form submissions. The HTML Inputs lesson explains how form fields and submit buttons work together.

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.

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 like a control and remain easy to see, read, and use with a mouse, keyboard, or touch screen.

Buttons