Make a button element look like a link

Categories

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:

Code language
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.

Remember: if your user is supposed to go somewhere, use an <a> element. If something with JavaScript needs to happen, use a <button> element.

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

Hello, I’m Andy and I’ll help you build fast & visually stunning websites.

I am currently setting up a new creative agency called Set Creative Studio and we are taking on projects for 2022, so if you have a project in mind, get in touch.