Having fun with link hover effects | CSS-Tricks

A designer I work with was presenting comps at a recent team meeting. She had done a wonderful job piecing together the concept for a design system, from components to patterns and everything in between that would make any front-end developer happy.

But there was a teeny tiny detail in her work that caught my eye: the hover state for links was a squiggle.

Default link (top) and hover effect (bottom)

Huh! Not only had I not seen that before, the idea had never even crossed my mind. Turns out there are plenty of instances of it on live sites, one being The Outline. That was the one that was implementation that inspired the design.

Cool, I figured. We can do something like a linear background gradient or even a background image. But! That wasn’t the end of the design. Turns out it’s animated as well. Again, from The Outline:

Screenshot from The Outline article (source)

Whoa! That’s pretty wild. I wasn’t sure how to approach that, honestly, because animating any of my initial ideas would be difficult, especially for cross-browser support.

So, how did The Outline do it? Turns out, it’s SVG. We can make a squiggly path and animate it pretty easily:

See the Pen Squiggle by Geoff Graham (@geoffgraham) on CodePen.

But how does that work with a link? Well, we can use SVG on the background-image property:

See the Pen Squiggle by Geoff Graham (@geoffgraham) on CodePen.

But that’s kinda crappy because we can’t really animate that. We need better values for that. However, we can inline CSS directly on the SVG in the background-image property. We can’t simply copy and paste the SVG code into the property, but we can with some proper encoding:

See the Pen Squiggle by Geoff Graham (@geoffgraham) on CodePen.

And, since SVG can contain its own styles within the markup, the animation can be tossed right there in the background-image property, the same way we would do it with CSS in an HTML document head or inline CSS in HTML.

See the Pen Squiggle by Geoff Graham (@geoffgraham) on CodePen.

We can style it up a little differently, if we’d like:

See the Pen Link Effectz – Squiggle by Geoff Graham (@geoffgraham) on CodePen.

This is inspiring!

I have no idea if an animated squiggle makes for a good user experience and, frankly, that’s not the point of this post. The point is that The Outline had a fun idea with a slick CSS implementation.

That got me thinking about other non-standard (perhaps even unconventional) hover styling we can do with links. Again, tossing aside usability and have a grand ol’ time with CSS…

The Border to Background Effect

Maybe that same bottom border on the default link can grow and become the full background of the link on hover:

See the Pen Link Effectz – Background on hover by Geoff Graham (@geoffgraham) on CodePen.

Heck, we can even do something similar horizontally:

See the Pen Link Effectz – Horizotonal Background by Geoff Graham (@geoffgraham) on CodePen.

The Outlined Text Effect

Let’s strip out the font color and leave an outline behind.

See the Pen Link Effectz – Outline on hover by Geoff Graham (@geoffgraham) on CodePen.

The Raised Text Effect

Another idea is to raise the text as if it grows out of the page on hover:

See the Pen Link Effectz – Raised text on hover by Geoff Graham (@geoffgraham) on CodePen.

The Font Swapper-oo Effect

This is so impractical that it makes me LOL, but why not:

See the Pen Link Effectz – Swap font on hover by Geoff Graham (@geoffgraham) on CodePen.

The “Turn it Up, Chris” Effect

Sorry, Chris. You know you love it. ❤️

See the Pen Link Effectz – Turn it up, Chris! by Geoff Graham (@geoffgraham) on CodePen.

What can you come up with?

Have ideas? Let me know in the comments and I’ll toss ’em in the CodePen collection I’ve started.

Comments

Luke Pettway

# September 21, 2018

The “Turn It Up Chris” effect is the best one and you should immediately update all links on this site to that.

Rachel

# September 21, 2018

Oooo I like that border to background example. I’ve always just done boring color or underline changes on hover/focus, going to have to try that one out :)

Music47ell

# September 22, 2018

I also wrote about the squiggly line around the time when The Outline launched.

You should definitely check it out.

Francky

# September 22, 2018

Hi Geoff,
In the “Turn it Up, Chris” effect I guess the width of the background-img can get a px unit, to reduce the full width and to enable disappearing of the hover for devices with a small height (mobiles in landscape orientation).

Another option is to use an image instead of a background imgage, which is also easy to get working in IE11 (for the Windows-7 users).
See this alternative: clba.nl/experiments/another-link-hover-effect.htm

Jack

# September 23, 2018

OMG WTH! very nice hovering effect with animation I’ve seen first time!

Gonna use in my site for sure:)

Looking for some more ideas…

Oksana Fortunato

# September 23, 2018

Hello Geoff, thank you for this grate article. Only on reading this I have discovered about the great possibility to animate svg via css and just have realized the real meaning of UTF-28 encoded characters ‘%3C … %3E’. So, is there a reason and possibility to use for example svg’s ‘desk’, ‘title’ and ‘use” tags in css in the same way ?
Well, I have noticed that it also would be better to change to 20px the background-size instead of ‘auto’ on hover state, as it cuts up and bottom of squiggle, and frames it during the animation. 20px here is equal size to svg’s viewBox.

Geoff Graham

Permalink to comment# September 24, 2018

Hey Oksana! Good question. I’m not sure I can think of a reason to add those attributes, but I suppose it can’t hurt! Although this example made me think about the use of the text tag to get content into a div as an alternate to the content property.

Rob

# September 24, 2018

Amazing! But what about mobile?

Geoff Graham

Permalink to comment# September 24, 2018

Most mobile browsers ignore hover effects or will activate them on touch, depending on the link behavior. I wouldn’t expect any of these experiments (or many other hover effects) to translate well into mobile.

That said, I do remember Samsung doing something several years ago that allowed hover effects when actually hovering a finger over an object.

Eliana Bryson

# September 24, 2018

CSS is still very powerful and many developers have found unique ways of doing wonders through CSS. Most of us used to think that it is old language for advanced formatting of website but still some developers have proven them to be wrong.

David Carrillo

# September 24, 2018

What about bouncing letters? with some css animations that would be cool.

Niall Flynn

# September 24, 2018

Toastie! The old MK game effect is great http://rubentd.com/img/toasty.png

Stephen J Cronin

# September 24, 2018

Great write up! I was actually the author of The Outline’s squiggle code. I think the way you broke down the code is pretty spot on. The idea of this method came out of some of the requirements I set for what we needed to do. We wanted the squiggle to be able to:

underline text across 2 lines
animate on hover
underline text of different sizes
have the ability to be any color

SVG would allow for dynamic sizing and color. Putting it as a background-image would allow for multiline squiggles. As for the css transition backed into the SVG, that was quite experimental. It worked pretty well and so that is the solution we ended up rolling with for that.

Geoff Graham

Permalink to comment# September 24, 2018

Heck yeah, this is great context! Thanks for sharing — and really nice work. :)

Benedict Forrest

# September 24, 2018

You could animate the background image in the second example, by animating the background-position value. Like so:

@keyframes shift 
    from {
        background-position: 0 bottom;
    }
    to {
        background-position: -20px bottom;
    }
}

a:hover {
    animation: shift .3s linear infinite;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/squiggle.svg");
    background-repeat: repeat-x;
    background-size: 20%;
    border-bottom: 0;
    padding-bottom: .3em;
    text-decoration: none;
}

SelenIT

# September 27, 2018

Nice and inspiring examples! But… wouldn’t it be better to use -webkit-text-fill-color: transparent instead of color: transparent in the outlined text example, leaving the plain old color alone as the reliable fallback? What is the use of making text invisible for all, including browsers that don’t support non-standard (though included in the so called “Compatibility standard” by WHATWG) decoration possibilities?

Geoff Graham

Permalink to comment# September 27, 2018

Yep, for sure! That would totally be the best way to go if planning to use that example in production.

The version in this post does have a fallback for browsers that do not support the outline, but perhaps that conditional block could also include swapping the color to something more supported.
SelenIT

Permalink to comment# September 27, 2018

Unfortunately, the code in @support not(...) {} block will have no effect in browsers that don’t support @support itself, but unconditional color: transparent will work nearly everywhere:(

Boaz Rossano - 2Cents - the leading UX Design agency (Tel Aviv, Israel)

# October 4, 2018

Love it – I wish I could add it to my site on Wix…

Oksana Fortunato

# October 5, 2018

You are right Geoff, mostly of SVG attributes work in URL data, just need right syntax and it’s a bit messy to maintain. There are two contributed samples with applied ‘desc’, ‘g’, ‘use’, ‘text’, ‘textPath’. I don’t pretend to declare them as proper animation effects for links, it’s rather my CSS SVG case study :
One
Two

Shaurya Shubham

# October 6, 2018

If we change the font swap effect with –

a:hover {
  font-family: Poppins, sans-serif;
  font-weight: 900;
}

and include Poppins instead of Creepster, It is a decent and interesting effect

This comment thread is closed. If you have important information to share, please contact us.