🔗 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