<button>

The humble <button> is perhaps the most useful element in the HTML spec. Let's dive into what it can do

The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it performs an action, such as submitting a form or opening a dialog.
MDN Docs

Whenever I want to add some interactivity to my web apps or websites, I reach for a button – and so should you. Sure, there are other ways to technically make the website respond to user interactions, but the <button> element is the quickest way to get something that works for everybody.

This is what you get out of the box:

• a clickable element that works on all devices
• a focusable element that's easy to interact with via screen readers and the keyboard
• a completely stylable element that has a sensible platform-dependent (albeit a bit boring) design
• a way to submit (or reset) HTML forms

That's a lot of fun in a single HTML tag!

Your friend with forms

When you create a form, buttons can either submit or reset the form for you. It typically looks like this:

<form action="comment" method="post">
  <label for="comment">
    Comment
  </label>
  <textarea name="comment"></textarea>
  <button>Send</button>
</form>

By default, this little code snippet will let you interact with your server or API without any fuss whatsoever. When you click the button, the browser will create a POST request to your server with all the form data.

If you want a way to reset all fields in the form, you can set the type attribute to reset. That will blank out all the fields in the enclosed form:

<form action="comment" method="post">
  <label for="comment">
    Comment
  </label>
  <textarea name="comment"></textarea>
  <button>Send</button>
  <button type="reset">Reset</button>
</form>

That will replace a lot of custom JavaScript code in a single swoop!

You can also add buttons that will alter the method or action of the enclosing form:

<form action="comment" method="post">
  <label for="comment">
    Comment
  </label>
  <textarea name="comment">
    The original comment
  </textarea>
  <button formmethod="put">Updaate</button>
  <button formmethod="delete">Delete</button>
  <button formaction="post">Make your comment a post</button>
</form>

That's a great way to write less code, and use more platform. 🎉

Your friend when you don't want a form

Everything doesn't have to be a form. Often, you want to trigger some custom JavaScript code when you click a button (play a video, open a modal etc). In those cases, you need to set the type attribute to button.

<button type="button">Open</button>
<script>
  document.querySelector("button").addEventListener("click", () => {
    alert("Thanks for clicking!");
  });
</script>

This is really useful when you want to create something a bit more advanced than a document.

Styling

Even though the buttons have a pretty sensible default, you probably want to add your own schwung to them. In order to do so, you have to reset quite a bit of css:

button {
  appearance: none; /* Removes the platform specific styling */
  background: transparent; /* Removes the typical grey background */
  border: none; /* Removes the original border */
  border-radius: 0; /* Removes the default border radius */
  font-size: 1rem; /* Resets the font size */
  padding: 0; /* Removes the default padding */
  font-family: inherit; /* Inherit the font */
  overflow: visible; /* Reset the overflow */
  line-height: inherit; /* Use the enclosing line height */
}

You probably want to set these properties to fit your general design.

Incredibly important for accessibility

Apart from links, buttons is the main way for users to interact with your web page. They are deeply integrated into every assistive technologies, and makes them work for all your users – not just the abled ones. Adding an onclick listener to a <div> might give you the same effect, but you'll lose a bunch of important properties:

• it won't get an active state you get to style
• you can't disable it
• you can't focus it
• you can't use it with assistive technologies
• people will mock you on X

So do the right thing and use a <button>. Thanks for reading!