Buttons

When the user clicks something to do something (not navigate), that’s a <button>. It’s keyboard-focusable, announces itself to screen readers, supports :focus-visible, and can be styled with CSS however you like.

Three Types

<form>
  <input name="email" />
  <button>Submit</button>                           <!-- type=submit by default -->
  <button type="button" onclick="hint()">Hint</button>  <!-- doesn't submit -->
  <button type="reset">Clear</button>
</form>

Style It However

The browser’s default button looks ugly. Reset and rebuild:

button {
  font: inherit;
  padding: 0.5rem 1rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
button:hover  { background: rgb(0 0 0 / 5%); }
button:focus-visible { outline: 2px solid blue; outline-offset: 2px; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }

Don’t Use <div> as a Button

<!-- ✗ Not keyboard-focusable, no screen-reader role -->
<div class="btn" onclick="save()">Save</div>

<!-- ✓ -->
<button type="button" onclick="save()">Save</button>

<button> gives you all the accessibility for free.

Buttons vs Links

• Click triggers an action → <button>
• Click navigates somewhere → <a href>

If you have a button that “goes to the home page”, that should be <a href="/">Home</a> styled as a button — not a button that runs window.location = "/".

Disabled State

<button disabled>Save</button>

Disabled buttons are:

• Not focusable
• Not clickable
• Visually faded (you should style this explicitly)

For “submit while saving” UX, you often want to disable + show a spinner inside the button.

Up Next

Embedding video and audio.