CSS Basics: Styling Links Like a Boss

The web was founded on links. The idea that we can click/tap a link and navigate from one web page to another is how surfin’ the web become a household phrase.

Links in HTML even look different from regular text without any CSS styling at all.

They are blue (purple if visited). They are underlined. That’s a link in it’s purest form.

But what if we want to change things up a bit? Perhaps blue doesn’t work with your website’s design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just we can any other element. All we need to do is target the element in our stylesheet.

Want to use a different font, change the color, remove the underline and make it all uppercase? Sure, why not?

a {
  color: red;
  text-decoration: none;
  text-transform: uppercase;
}

Now we’re cooking with gas! But why stop there? Let’s look at a few other ways we can style links to complete the experience.

Style Each Link State

Links have different states, meaning they adapt when we interact with them on a webpage. There are three additional states of a link that are worth considering anytime we change the default style of links:

• Link (:link): This is probably the least used, but it’s for styling <a> elements that have an href, rather than placeholder links.
• Visited (:visited): The appearance of a link that the user has clicked on the page before when the mouse cursor is not on top of it. The styles you can apply to :visited are restricted for security reasons.
• Hover (:hover): When the mouse cursor is place on top of the link without a click
• Active (:active): When the link is in the process of being clicked. It might be super quick, but this is when the mouse button has been depressed and before the click is over.
• Focus (:focus): Like :hover but where the link is selected using the Tab key on a keyboard. Hover and focus states are often styled together.

Note the order there is important:

1. Link
2. Visited
3. Hover
4. Active
5. Focus

If you don’t do it in this order (imagine, say, your :visited style comes after your :hover style) the links won’t behave quite how you want. In my imaginary example there, the :visited style would override the :hover style, which is highly unlikely that is what you want. Focus is an accessibility feature, thus last because it is most important.

One way to remember the order is LOVE and HATE. that is L(ink)OV(isted)E / H(over)A(Active)TE.

Here is the same link we have been looking at. First, try hovering your mouse on top of it without clicking and notice that it becomes underlined. Then, click on the link, but leave your mouse button clicked down for a little bit to see how the active style changes the color of the link to black. Finally, let up on the mouse button and the link should turn purple before it’s technically been visited.

Links seem like a simple concept, but boy do they have a lot going on—and CSS gives us some incredible power to customize the experience!

Links as Buttons

While there is some debate about it, we can use CSS to make a text link look like a button.

Like other HTML elements, CSS can add background colors and padding to links that allow us to create the appearance of a button. Here’s our link using those techniques:

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

Great! Now, let’s use the state-altering powers we learned in the last section to make our faux-button more interactive. We’ll make the button dark gray on hover, black on active, and light gray on visit:

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

a:hover {
  background-color: #555;
}

a:active {
  background-color: black;
}

a:visited {
  background-color: #ccc;
}

Styling a link as a button and taking advantage of the states allows us to make some pretty cool effects. For example, let’s create a button with some depth that appears to get pressed when it’s active and pop back up when the click is done.

Oh, and Cursors!

We’ve gone into pretty great depth on style links, but there is one more component to them that we cannot ignore: the cursor.

The cursor indicates the position of the mouse on the screen. We’re pretty used to the standard black arrow:

We can change the arrow to a hand pointer on it’s hover (:hover) state so that it’s easier to see that the link indicates it is an interactive element:

a:hover {
  cursor: pointer;
}

Whew, that’s much nicer! Now, we have a pretty fancy link that looks like a button with proper interactive cues.

Leveling Up

We’ve covered quite a bit of ground here, but it merely scratches the surface of how we can control the style of links. If you’re ready to level up, then here are a few resources you can jump into from here:

• Mailto Links – A good reference for linking up email addresses instead of webpages.
• The Current State of Telephone Links – Did you know you can link a phone number? Well, here’s how.
• Cursor – The CSS-Tricks reference guide for customizing the cursor.
• When to Use the Button Element – If you’re wondering about the difference between a link button and a traditional form button, then this is a good overview with suggestions for which is better for specific contexts.
• Button Maker – A free resource for generating the CSS for link buttons.