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.

Examples of what a button does

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 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.

ARIA Authoring Practices Guide — W3C

A button should not:

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:

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:

Using the <input> element

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

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:

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:

More information on creating a custom button