Make a button element look like a link

👋 FYI, this note is over 6 months old. Some of the content may be out of date.

.link-button {
  display: inline;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  background: transparent;
  color: currentColor;
  -webkit-appearance: none;
  text-decoration: underline;
}

ℹ️ It is worth noting that buttons cannot look exactly like an a element because browsers override the display property and force it to act like display: inline-block despite what you define. The one exception is display: contents but there are quite a few catches with that property; more alarmingly, that the element semantics are completely removed which is a nightmare for accessibility. Read more about it here: https://www.scottohara.me/blog/2018/10/03/unbutton-buttons.html

← Back home