This week I learnt...

The wrong and right way to make a link look like a button

Nic's photo
Nic
·

2 min read

There's definitely a right way and a wrong way of doing this. Probably more than one wrong way, but any way that means only the link is clickable, is the wrong way.

Example

https://codepen.io/nicm42/pen/oNeaMLe

In the CodePen above are two links that look like buttons. If you hover over the first one, you only get the hand cursor and the link at the bottom of your browser when you're over the link. On the second one, you get the hand and link at the bottom of your browser when you hover over the button.

Why does this matter?

It matters to me because it makes me think I'm going mad or there's something wrong with my computer. It looks like you should be able to click anywhere on the button, so I do. And then wonder why nothing happens.

In case you think my example is too contrived, here's a real world example that I took a screenshot of. This is from an email about my TV licence.

button1.png

button2.png

Solution

Add all the CSS you need to make the link look like a button to the link element itself. The only CSS I have on my second link in the CodePen at the top is:

.link {
  padding: 2em 3em;
  background-color: pink;
  color: black;
}

The background colour makes it look like a button, and I made the text colour black, so it's not a horrible clash with the default blue link colour.

The padding then makes it bigger - otherwise the pink would be around just the text. I went for something reasonably big so it's easy to see what's happening. The padding effectively means that the link takes up more space and the background colour is an indication of how much space the link is taking up. And means that clicking anywhere on the 'button' will be like clicking on the link.

CSS