Ideas for Distorted Link Effects on Menus

Some examples of how to use decorative distortion effects on big typography menu links.

From our sponsor: Convert designs into clean, developer-friendly React, Vue and HTML code with Anima.

After exploring some distortion effects on line elements for links, I couldn’t wait but try them on some big style menus. So here is a little set of demos that shows some ideas for how to use those distortion effects. They were a great excuse to play with some of my favorite typefaces available on Adobe Fonts including Bely Display, Freight and Rigatoni.

How about a tiny squiggly line under an outlined text:

Or some distortion on a thick line with a gradient:

Or maybe two lines hugging the lovely Rigatoni typeface:

Let’s put that swirly line in front of a sexy serif:

Or be bold and make a strong contrasty box with a wave inside:

Check out all the demos here.

I really hope you enjoy these styles and find them useful!

Please share your creations with me on Twitter @codrops!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.