Since the beginning of the World Wide Web, the venerable hyperlink has been a crucial feature. Remember the amazement when you found out that a single click could take you anywhere in the world?
OK, maybe that gee-whiz moment has passed. But links are still as important as ever. And they’re something designers need to make both obvious and accessible.
Though simplistic, the default behavior of underlining text links works well enough. Yet, modern CSS and JavaScript allow us to do so much more. Not only can links look prettier than ever, they can also provide greater context and fit into your overall branding.
Today, we’ll show you some examples of link styles that go beyond the ordinary. They stand out and make for a better (or more interesting, at least) user experience.
How to Subtly Stand Out
Link underlines that offer contrast from the text itself can be a great solution. They’re intuitive for users without being over-the-top with styling. Here, the blue underline separates itself nicely from the dark text. And the nifty hover animation only adds to the experience.
See the Pen Link hover w/ line by Aaron Iker
Accounting for Descending Characters
Descending characters (like the lowercase g, j or p) can sometimes look awkward when underlined. But this animated “guitar string” demo provides a consistent look. It’s a little thing, but brings a uniform neatness to the overall design.
See the Pen Guitar String Link Underlines by James Almeida
Coming up Short
Check out the underlined links in the following body text. Margins on either side result in an underline that doesn’t quite cover the full width of the linked text. Upon hovering, the underline smoothly transforms to cover the empty space. This microinteraction is again subtle, but very user friendly.
See the Pen Link Style Tests by Nick Ciliak (@nickcil)
Wired for Style
Thickly-underlined links were initially made popular by Wired.com. And while the publication has since moved on in styling, their legacy is still worth considering. It’s hard for users to miss these hyperlinks – yet the impact of the style isn’t too overwhelming. This is the kind of balance designers should aim for.
See the Pen Wired.com Huge Underlined Link Style by Mike Mai
Animated Highlights
Hover effects are a great way to add some personality to your site’s hyperlinks. Take this CSS keyframe example. It transforms basic text and produces an attention-grabbing highlight effect upon hover. It both looks cool and helps guide users at the same time.
See the Pen CSS3 Keyframes Animation Link Style by auginator
Marginal Context
By themselves, links don’t always provide full context. Sure, some of it depends on the content itself. But there’s only so much text you can realistically hyperlink. That’s where this example comes in handy. It adds citational content that is shown off to the side. Hovering over a link will also highlight the relevant citation. This could be a perfect fit for academic work or even tutorials.
See the Pen Links with Marginalia Notes by Amelia Bellamy-Royds
Moving Tooltips
If citations aren’t a great fit for your project, perhaps tooltips could do the job. With this jQuery script, you can add tooltips to virtually any element – links included. What’s more, they’ll move right along with your cursor.
See the Pen Moving tooltip on anything – mouse tracking by Eric Porter
Take Your Pick
Hover animations can help ensure that users know when their cursor is in the right place. If you’re looking for an animation that is both compelling and lightweight, this collection of effects is worth checking out. There are a number of attention-getters to enhance your links.
See the Pen SCSS link hover animations by Jens Lettkemann
Link up with Compelling Style
Dressing up your site’s hyperlinks is one of the easiest ways to improve usability. A few lines of CSS could be all that stands between better engaging users and maybe even increasing conversions.
The examples above demonstrate a variety of different approaches. Some are a bit more complex, while others are dead simple. That’s great, because these effects aren’t one-size-fits-all. The key is in picking the solution that fits your site and will appeal to your particular audience.
Links are too important to ignore. Hopefully these examples will inspire you to do more than the bare minimum.
Top