Creating Links that Look like Buttons in CSS

I have written about styling links in CSS in another post. Creating the kind of buttons you see in website navigations is also done with simple links. The most widely used method to do it is to add display: inline-block; to the link and then apply padding. By default, links are inline elements, you applying padding would not work as expected. More about why here.

The ideal x / y padding ratio is usually around 1:2 or 1:3

The Wrong Solutions

Some people teach to apply a width and height instead of giving a padding. That would work, but it’s inferior to the padding solution. With padding, the links is centered by default. With the other solution you have to hack it in place.

It gets worse when you test it with varying lengths of links. With the padding solution, the size of the button will increase as needed, and the padding on the right will be there no matter the size. With the other solution, a longer link could even overflow.

Some people also apply padding to a container. That leads to a bad user experience where a user will be under the impression that he or she can click on the entire button, but in reality, the button will only work if they click on the link text.

An Example

.button {
  padding: 5px 15px;
  background-color: orange;
}

The following two tabs change content below.

Jay Galaczi

Latest posts by Jay Galaczi (see all)

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *