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, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me