Use <a href="mailto:…">. A link already supports keyboard focus, browser status text, context menus, and assistive-technology link lists. A<button> is for an action inside the current page.

This example keeps a 44-pixel minimum target, clear contrast, a hover state, and a visible keyboard focus ring. The subject and body are percent-encoded inside the href.

<a class="email-button" href="mailto:sales@example.com?subject=Pricing%20question&amp;body=Hi%2C%0A%0AI%20would%20like%20to%20ask%20about%20pricing.">
  Ask about pricing
</a>

.email-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 12px 20px;
  background: #a12f24;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.email-button:hover { background: #7d251b; }
.email-button:focus-visible {
  outline: 2px solid #a12f24;
  outline-offset: 3px;
}

Use a label such as Email support, Ask about pricing, or Send product feedback. Avoid labels such as Click here or Submit. The visitor should know that the control opens an email composer.

Avoid onclick="window.location='mailto:…'" on a button. It adds code without improving the handoff. It also removes the destination from the HTML and can make the control harder to inspect or reuse.

Do not put an anchor inside a button or a button inside an anchor. Nested interactive controls create invalid behavior for keyboard and screen-reader users.

1. 01Tab to the link and confirm the focus ring is visible.
2. 02Open it and confirm the correct recipient, subject, and body appear.
3. 03Check the label at narrow widths and with larger text.
4. 04Keep another contact route when email delivery must be guaranteed.