10 Unique Animated Underline Text Effects with CSS
The default CSS underline works great. Who could hate it?
But there’s always room to improve things. You may not think there’s a lot you can do with underlines, but if you delve into CSS animation you’ll realize just how much you really can do!
I sorted through countless CSS underline styles and picked my top choices for the best custom underlines on the web. If any of these catch your eye feel free to jump in and try messing around with the source code.
1. Alternating Underline
If you move your cursor between these links you’ll notice something kinda funny. The underline effect in the nav menu actually changes styles between links.
Not only that, but it moves across the nav dynamically to give the illusion that it’s one singular block. Pretty cool right?
You can do all of this yourself with a bit of CSS by adding the underline block into an HTML element. Surprisingly simple considering how little code you need (about 60 lines of CSS).
2. Spanning Multiple Lines
CSS line break styles are tricky and not easy to work around. But with some ingenuity developer Will King built this pen creating a dynamic underline effect that can span multiple lines without any bugs.
Note this does rely on a bit of JavaScript to keep the line in-tact. But it’s also dynamic enough to work with any link on the page, so it doesn’t matter how you format the text.
Plus this whole thing uses a custom CSS3 gradient for the background which is pretty darn cool.
3. Sliding Underline
Developer Ryan Morse created this very simple sliding underline effect reliant solely on CSS. It’s a pretty elegant solution considering it doesn’t even require an extra HTML item.
You can design your navigation menus just like any other site and use this CSS effect to create dynamic sliding animations. Plus all of the results can be altered in the CSS code which includes easings and total duration.
4. Better Text Underline
At first glance you may not notice anything different with this underline. But if you compare it to the “default” demo lower in the page you’ll see this really does look a lot better.
In Lukas Horak’s better text underline you’ll notice the bar underneath the text fits nicer into descending elements. This considers letterforms like ‘g’ and ‘p’ where lines drop beneath the usual line height.
Also the underline itself is pushed ever-so-slightly lower beneath the text so it takes on a new appearance compared to the browser default.
5. Animation Styles
This unique pen sports a few custom underline effects created with pure CSS by developer Matthew Scott.
It boasts four very specific underline styles based on some common CSS transitions:
- Right-to-left
- Left-to-right
- Animating outwards
- Animating inwards
You’ll notice this works on the common CSS3 transitions which work both while hovering the link & while moving your cursor off the link.
Definitely some cool effects and they’re all pretty easy to port into your own projects.
6. More Animation Styles
Here’s another pack of custom underline animations, these ones created by dev Kseso.
These go a little more extreme with the underline styles pushing CSS3 shadows for glowing effects. You can probably use this as a template to make a rad Star Wars lightsaber design if you have the time (or just love Star Wars).
7. Just Dropping In
I’ve seen this effect on a few websites and it’s probably one of my favorites. The drop-down underline uses pure CSS and it animates the line into view with a transition effect.
With this animation you still get the feeling that each underline “border” connects to each link. I like it more than the lines that slide between links because this effect feels snappier and more direct.
If you want a real minimalist approach to underline effects then you should definitely try working with this code.
8. Expanding Animation
The expanding underline style can be found in the underline pack I mentioned earlier. But this specific underline is a bit different because it uses custom animation timing.
Notice that it’s using the cubic-bezier() function to create a unique animation on hover.
This runs a little quicker than the default “linear” transition so it gives quite a different effect. And you can even try customizing the bezier animation yourself to build a unique underline style all your own.
9. Custom CSS Underlines
Here’s another style that really can work on any website. Developer Tristan Wilson created these simple underlines that edge the line a few pixels lower beneath the text.
It’s just subtle enough to notice but certainly won’t make a huge difference in usability. This effect is really about aesthetics more than extra usability.
If you want your underlines to really stand out from all the herd this set is a great place to start.
10. Fitting Between Descenders
Earlier I mentioned customizing underline styles to fit with descenders in type. Well this pen by Jonathan Neal does just that and it uses nothing more than HTML5 and CSS3.
The entire effect hinges on a couple CSS3 properties: box-shadow and text-shadow to be precise.
This creates the illusion that there’s space to the side of descender elements and it gives the underline a classier feel.
Definitely a clean choice for any website and it’s a nice way to alternate your underline color too.
11. Custom Gradients
If you’re really trying to push limits then try reworking this pen with its custom underline gradient style.
The gradient runs through CSS3 so you can change the colors to anything you want. And if you can believe it this thing requires no extra HTML to work. Just target whatever anchor links you want and copy/paste the CSS codes to get your very own gradient underlines.
Out of all these designs I certainly hope there’s one nice effect you can take away from this collection.
Designers don’t always think about underline effects but there’s a lot you can do with typography and if you know your way around CSS then really, the sky’s the limit.
The post 10 Unique Animated Underline Text Effects with CSS appeared first on Speckyboy Web Design Magazine.