Make a button element look like a link

Sometimes you need interactivity within flow content, such as a paragraph of text.

To help with this, you can make a proper <button> element look like a link and retain all of that accessibility and semantic goodness with only a tiny bit of CSS:

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

  -webkit-appearance: none;
}

In this context, it’s probably second nature to reach for an <a>, which is pretty suboptimal.

The benefit of using a <button> instead, is that you get all of the other interactive events for free, such as keyboard events, but also, some assistive technology allows users to loop through all of the buttons on the page.

With all that in mind, this approach will be endlessly more helpful than using an <a> element.