5 ways to make sliding underlined links

Brent Larson — Sat, 12 Sep 2020 00:00:00 +0000

Underlined links are as old as the web itself. The underline gives affordance to users that it will link somewhere else. By default, all links are underlined and that's good enough for a lot of websites.

However, adding a little bit of motion to an underline can create a delightful micro-animation that can help bring your website to life. (did I buzzword right?)

Recreating the underline

Before we dive into the underline transitions, first we need to re-create the native anchor underline.

To get started, we'll add color to the link to help denote that it's a link and we'll get rid of the native underline so we can set our own.

a {
  color: saddlebrown;
  text-decoration: none;
}

From here, we could use an absolutely positioned pseudo-element (i.e. ::before) to achieve the same effect we want. However, absolute positioning will only display an underline on a single line, so I can't recommend going that route unless you're using this for something that you're confident won't ever be more than a single line.

So the only other option for creating a multi-line underline is using the background property. Since you can't change the size or positioning of background-color, we need to use background-image. I repeat the same color in the gradient as I'm trying to make the background a solid color, but you can definitely spice things up by making it a real gradient.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
}

With the gradient set, it will make the entire anchor's background to the color/gradient we specify, so we'll need to change its size and position to make it look like an underline.

We'll set the background-size's width to 100% and the height to 0.1em—we use an em here as it will proportionally scale the underline if the text size changes.

Set background-position-y to 100% to place the underline to the bottom of the anchor, making it look like an underline.

We'll also throw a transition in there so we can animate our underlines later.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 100% 0.1em;
  background-position-x: 0%;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

Edit on CodePen

1. Slide in and back

With this effect, we're going to be creating a link that underlines from left to right on hover. When hovered off, the underline will slide back to the left and disappear.

We set the background-size width to 0% initially to hide it. On hover, we change it to 100% to get it to slide from left to right.

If you want to reverse the direction, change background-position-x to 100% to change the starting position to the right.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 0%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
}

Edit on CodePen

2. Slide middle out

When we hover on the link with this effect, the line starts from the middle and extends simultaneously to the right and left edges. On hover-off, the line slides back to the middle and disappears.

The only difference between this one and the previous one is that we change background-position-x to 50% to making the starting point of the underline in the middle.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 50%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
}

Edit on CodePen

3. Slide in and out

Hovering on a link with this effect looks exactly the same as the first effect. However, on hover-off, the underline will slide off to the right instead of snapping back to the left.

There's no hover-off pseudo-class in CSS, unfortunately, but there are some CSS tricks to mimic it for certain effects.

We essentially use the same CSS trick, but here we take advantage of the underline not being initially visible. We set background-position-x: 100% with our initial styles so it slides to the right on hover-off and change it to 0% on hover so that the line comes in from the left.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
  background-position-x: 0%;
}

Edit on CodePen

4. Slide to middle

With this effect, we have 2 lines that we start on the outside edges and slide them inwards until they meet in the middle. On hover-off, they slide off to the edges and disappear.

Since we have 2 different lines, we need to create 2 linear-gradients. Anytime you want to add another background property, you must add a comma after each item's value. However, if the value is identical for both, CSS will just repeat it. This means we don't have to manually duplicate each background property if it's going to be the same for each linear-gradient.

Since everything else for the lines are the same, we just need to adjust their positions. We set the first line's background-position-x to 0% to start it on the left edge and the 2nd to 100% to start it on the right edge.

a {
  color: saddlebrown;
  background-image: linear-gradient(#d99a5a, #d99a5a), linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 0%, 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
  text-decoration: none;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
}

Edit on CodePen

Always-visible underline variants

If you do want an underline to always be present, you can still use the first four effects. The only difference is we need to add an additional underline using the same linear-gradient effect. Note that for the slide to middle effect, we'll have to do add a 3rd linear-gradient since that effect already uses 2 of them.

/*
// Shared Styles
*/
a {
  color: saddlebrown;
  background-image: linear-gradient(#d99a5a, #d99a5a), linear-gradient(saddlebrown, saddlebrown);
  background-size: 0% 0.1em, 100% 0.1em;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
  text-decoration: none;
}

/*
// Slide in & back
*/
.slide-in-back {
  background-position-x: 0%;
}

.slide-in-back:hover,
.slide-in-back:focus,
.slide-in-back:active {
  background-size: 100% 0.1em, 100% 0.1em;
}

/*
// Slide in & out
*/
.slide-in-out {
  background-position-x: 100%;
}

.slide-in-out:hover,
.slide-in-out:focus,
.slide-in-out:active {
  background-size: 100% 0.1em, 100% 0.1em;
  background-position-x: 0%;
}

/*
// Slide middle out
*/
.slide-middle-out {
  background-position-x: 50%;
}

.slide-middle-out:hover,
.slide-middle-out:focus,
.slide-middle-out:active {
  background-size: 100% 0.1em, 100% 0.1em;
}

/*
// Slide to middle
*/
.slide-to-middle {
  background-image: linear-gradient(#d99a5a, #d99a5a), linear-gradient(
      #d99a5a,
      #d99a5a
    ), linear-gradient(saddlebrown, saddlebrown);
  background-size: 0% 0.1em, 0% 0.1em, 100% 0.1em;
  background-position-x: 0%, 100%;
}

.slide-to-middle:hover,
.slide-to-middle:focus,
.slide-to-middle:active {
  background-size: 100% 0.1em, 100% 0.1em, 100% 0.1em;
}

Edit on CodePen

5. Slide to top

For this effect, we have an always-visible underline, but on hover, we'll grow the underline to the top of the anchor.

Since this underline will slide underneath the text, it's important to make sure you use colors that will pass a contrast checker to ensure good accessibility.

Since we want the underline to always be visible, note that we changed the default background-size's width to 100%. To slide the underline to the top of the link, we change the background-size's height to 100%.

a {
  color: black;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 100% 0.1em;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 100%;
}

Edit on CodePen

Bonus!

For making it this far, I have a little treat for you. I saw this effect making the rounds on Twitter and it's actually what inspired me to write this post.

@jh3yy created a CodePen where he animates an underline over an existing underline.

Learn how to create this effect on Jhey's Egghead tutorial.

Got more?

Have a cool underline link effect? I'd love to see it!

Send it to me @NerdCowboy or through my contact page!

Pretty vs Usable

Brent Larson — Sat, 12 Sep 2020 00:00:00 +0000

Beautiful is Best?

A phenomenon most of us are familiar with, even if we don't know it by name:

good looking people have an unfair advantage in life.

The beauty premium phenomenon states that we expect good-looking people to be "better, smarter, more successful, more important, and more valuable."

Likewise, in 1995 when researchers were studying ATM UIs, they noticed that people expected more of and were more forgiving of good-looking interfaces.

Sound familiar?

If you replace "UIs" with "people", you basically have what the researchers discovered—the aesthetic-usability effect. It states that we have a tendency to perceive attractive UIs as more usable and expect that they'll work better—even if that isn't true.

Rationalizing Pretty

It seems almost every UX designer (including yours truly) has cited this aesthetic-usability effect at one point or another to justify a design decision that makes the design better-looking at the expense of usability or clarity.

And you know what? They're almost always wrong.

Michal Malewicz says it best in his tell it like it is article:

“UX has a hole in it. It’s called UI and it’s quite bad. This is often because a large part of “UX Designers” can’t design. There. I said it.”

It takes some skill to make a design pretty, but it takes a lot more skill to make a design pretty and usable.

The majority of job postings ask UX designers to do both UX & UI design, despite most not being remotely qualified to do both.

Not that I believe we should only have specialists—quite the contrary. But I don't believe we should expect designers to do something that they haven't shown they're capable of doing.

A Dumb Dichotomy

Designers citing this principle in defense of their "pretty" designs like to come up with this dumb dichotomy: either we make it pretty OR we make it usable.

Spoiler: you can make something pretty and usable.

Facebook Messenger recently redesigned its mobile app. Even though they simplified their app significantly, one thing they added was labels to their bottom tab bars. Is it cleaner without labels? Certainly. But adding labels doesn't all of a sudden make it an ugly design.

No One Knows What Your Dam Icon Means

Unlabeled icons are probably the number one reason a designer will bring up the aesthetic-usability principle. You can add a label to your dam icon in a way that looks good and people will actually be able to understand that the icon means “dam” and not "bacon dispenser."

We learned this was a bad idea when Flash became popular (remember mystery meat navigation?), but we seem to keep making the same mistakes over and over.

Unlike art, there's only one correct design interpretation, and it's your job as a designer to make that crystal clear.

There are certainly instances where you need to make some tradeoffs on aesthetics to make a design more usable, but if the rest of the UI is designed well, then it's still going to get the aesthetic-usability effect bump. It just won't look perfect. But really, how often is anything perfect?

Even good-looking people have a few flaws.

DEV Community: Brent Larson

5 ways to make sliding underlined links

Recreating the underline

1. Slide in and back

2. Slide middle out

3. Slide in and out

4. Slide to middle

Always-visible underline variants

5. Slide to top

Bonus!

Got more?

Pretty vs Usable

Beautiful is Best?

Rationalizing Pretty

A Dumb Dichotomy

No One Knows What Your Dam Icon Means