Mark Thomas Miller

Five modern, CSS-only hyperlink styles

As I explore the far reaches of the Internet, I often see creative workarounds to the text-decoration: underline of yore. After some careful consideration, I’ve lined up my five favorites for you to use on your own website.

Hyperlinks with subtle bottom borders

In fact, when scientists first taught a computer to play chess, its strategies were downright oafish. You should hover over that link.

This hyperlink is taken from the writing platform Svbtle, and it’s actually one of my favorites. It’s simple, it gets the job done, and it feels nice to hover over. I recommend pairing this with a 200 millisecond ease-in-out transition.

a {
    background-image: none;
    border-bottom: 2px solid #ddd;
    color: #222;
}

a:hover {
    border-bottom-color: #008CFF;
    color: #000;
}

Hyperlinks that break for descenders

People perceive speed as ease-of-use. See how the underline breaks underneath descenders?

This one is very cool: the underline breaks for descenders (like the one on p in the sentence above).

How does it do this? I’ve applied multiple white text-shadows to the hyperlink’s text, and they overlap its background image – a conveniently placed gradient that looks like an underline.

a {
    background-image: -webkit-linear-gradient(rgba(100, 200, 100, 0.25) 0%, #4d4d4d 100%);
    background-image: linear-gradient(rgba(100, 200, 100, 0.25) 0%, #4d4d4d 100%);
    background-position: 0 90%;
    background-repeat: repeat-x;
    background-size: 1px 1px;
    text-decoration: none;
    text-shadow: 3px 0 #fff, 2px 0 #fff, 1px 0 #fff, -1px 0 #fff, -2px 0 #fff, -3px 0 #fff;
}

Retro hyperlinks with thick bottom shadows

The next day, you see the moon hanging in the middle of the sky. You should hover over that one, too.

Give your hyperlinks a retro feel with a thick box-shadow effect with negative margins and a bright color. On hover, you can change the background property to envelop the text.

This works best with an extremely light color.

a {
    box-shadow: inset 0 -8px 0 0 #e2dbfc;
}

a:hover {
    background: #e2dbfc;
    box-shadow: inset 0 -7px 0 0 #e2dbfc;
}

Simple hyperlinks with thin bottom borders

The sun hangs at the top of the sky, its immense white heat bearing down on your back. That's a nice link to hover over.

Sometimes, you don’t want to punch people in the face with your hyperlinks. In that case, you can use a thin, dark gray bottom border and make it light up with an accent color on hover.

This hyperlink feels good because it applies light distribution (from the real world) to technology: the hyperlink starts off black (sitting in the dark), but on hover, the hyperlink’s text “turns on” like a light, illuminating the bottom border.

a {
    border-bottom: 1px solid #444;
    color: #333;
}

a:hover {
    border-bottom-color: #9f9f9f;
    color: #008CFF;
}

Punch users in the face with gradient hyperlinks

Basically, we should be pushing ourselves into being uncomfortable but not into suffering because of our work. You should definitely hover over that link.

And when you do want to punch people in the face with your stylesheet, you can use this option. Just change the colors in the gradient to match your website. Hover over the link to see the effect.

This gradient works nicely for menus and fixed text where there are no line breaks. Line breaks make it impossible for the background gradient to fully cover the text, which means that this isn’t a hyperlink for your blog posts.

a {
    background-color: #008CFF;
    background-image: -webkit-linear-gradient(left, #0051ff 0%, #FF1919 50%, transparent 50%);
    background-position: 100% 0;
    background-size: 200% 200%;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
}

a:hover {
    background-position: 0 0;
    color: transparent;
}

Squish the hyperlink’s underline on hover

In the chess community, artificial intelligence is known for making ugly moves. Hover over that link to squish the underline.

There’s nothing that makes a user feel more powerful than squishing a tiny line into an even tinier line with their mouse.

a {
    box-shadow: inset 0 -4px 0 0 #21cbed;
}

a:hover {
    box-shadow: inset 0 -2px 0 0 #21cbed;
    color: #000;
}

Do you use a unique hyperlink style? Send it to me at m @ this domain. I’d love to find some more examples of what more people are doing.