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.
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:
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:
But how does that work with a link? Well, we can use SVG on the
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:
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.
We can style it up a little differently, if we’d like:
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…
Maybe that same bottom border on the default link can grow and become the full background of the link on hover:
Heck, we can even do something similar horizontally:
Let’s strip out the font color and leave an outline behind.
Another idea is to raise the text as if it grows out of the page on hover:
This is so impractical that it makes me LOL, but why not:
Sorry, Chris. You know you love it. ❤️
Have ideas? Let me know in the comments and I’ll toss ’em in the CodePen collection I’ve started.