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:

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.

Demo

If you liked this post, you might like these ones, too

  1. Use grayscale filter to see where you are relying too much on colour

    🔥 A handy quick tip.

    Continue
  2. Use a set to remove array duplicates

    🔥 A handy quick tip.

    Continue
  3. Build a dashboard with CUBE CSS

    An in-depth guide to going from HTML all the way to a full styled banking dashboard, using the CUBE CSS methodology

    Continue

Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.