Ideas for Distorted Link Effects on Menus

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

From our sponsor: Try Mailchimp today.

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.