How to create a button

Understand what a button does and how to make one.

What is a button?

A button is an interactive component, a widget on a web page that triggers an action when a user activates it.

Activating a button might:

• show or hide some new content, like an accordion or a popup menu
• submit a form
• close a dialog window
• play a video.

Typically, buttons do not take the user to another location on the same page or to another web page. That’s what links are for.

The difference between buttons and links

The types of actions performed by buttons are distinctly different from the function of a link ... It is important that both the appearance and role of a widget match the function it provides.

A button should not:

• be used for creating a link
• be designed to look like a link.

Designing a button to look like a button and a link to look like a link is important. This is because each has a distinct role and how the component looks will tell the user something about:

• how to interact with it (by default, a native HTML button can be activated with the keyboard’s Space or Enter key, while a link only works with the Enter key)
• what to expect (activating a button will trigger some action on the page and activating a link will take you to another location or resource).

Read more about buttons versus links

• A Complete Guide to Links and Buttons — CSS-Tricks
• Links vs Buttons and Do’s & Don’ts for Accessibility — Steve Barnett
• Links vs. Buttons in Modern Web Applications — Marcy Sutton

Create a button

There are a few ways to create a button. For a quick review of some of these ways, see The Button Cheatsheet — Manuel Matuzović.

Native HTML buttons

To create a typical button in HTML, you can either use the <button> or the <input> element. Both these options are keyboard accessible by default.

Using the <button> element

For more on creating a button using the <button> element, see:

• <button>: The Button element — MDN Web Docs
• The <button> element — HTML Living Standard.

Using the <input> element

For more on creating a button using the <input> element, see:

• <input>: The Input (Form Input) element — MDN Web Docs
• The <input> element — HTML Living Standard.

Be careful with reset buttons

Be aware that reset buttons (that is, <button type="reset"> or <input type="reset">) can cause problems for users, so only provide one for situations where the user might want to frequently clear the form.

A reset button can:

• be clicked on by mistake, resulting in all the user’s entries being deleted
• add cognitive overload by making users have to think about whether they want to choose that option

For more on the usability issues of reset buttons, see Reset and Cancel Buttons — Nielsen Norman Group.

Custom buttons

In almost all cases, it’s recommended to use native HTML button elements. For more on why, see the YouTube video, Just use button — A11ycasts #05 — Google Chrome Developers.

Sometimes, however, a developer will repurpose some other HTML element to serve as the button. Such custom buttons need extra work to make them accessible. For more on what some of that work involves, see:

• Buttons: Keyboard, mouse and touch accessibility
• Buttons: Name, role and states.

More information on creating a custom button

• Button — ARIA Authoring Practices Guide — W3C: Includes examples of clickable HTML <div> and <span> elements made into accessible command and toggle buttons.
• Building Accessible Buttons with ARIA: A11y Support Series — Deque