Having fun with link hover effects

Hover Link အလွဆင္ခ်င္တဲ့ မိတ္ေဆြမ်ားအတြက္ပါ ေအာက္မွာ အလြယ္ဆံုးေျပာရရင္ Run Pen ကိုႏွိပ္ျပီး CSS ကုဒ္ေတြေကာ္ပီယူျပီးေတာ႔ ကိုယ္႔ ဘေလာ႔ဂါရဲ႕ Edid HTML ကိုသြားပါ ျပီးရင္ </skin> ကိုရွာပါ။ ေအာက္မွာေပးထားတဲ႔ထဲက ကိုယ္ႀကိဳက္တဲ႔ပံုစံရဲ႕ CSS ကို ေကာ္ပီယူျပီးေတာ႔ </skin> အေပၚက ထည့္ျပီး Save လုပ္ပါ။ မိမိစိတ္ႀကိဳက္ျပင္ဆင္လိုပါက Run Pen ကိုႏွိပ္ျပီးေတာ႔ အေပၚေထာင့္စြန္က EDIT ON CODE PEN ကိုႏွိပ္ပါ။
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:

So, how did The Outline do it? Turns out, it's SVG. We can make a squiggly path and animate it pretty easily: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.

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

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:

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:
Heck, we can even do something similar horizontally:

The Outlined Text Effect
Let's strip out the font color and leave an outline behind.

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

The Font Swapper-oo Effect
This is so impractical that it makes me LOL, but why not:
POP UP Trick Effects