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.

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 to level up your front-end development skills.

I'm a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I'm the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.