From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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:
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/03/LinkEffects_05.png?x86293)
Or some distortion on a thick line with a gradient:
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/03/LinkEffects_02.png?x86293)
Or maybe two lines hugging the lovely Rigatoni typeface:
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/03/LinkEffects_01.png?x86293)
Let’s put that swirly line in front of a sexy serif:
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/03/LinkEffects_03.png?x86293)
Or be bold and make a strong contrasty box with a wave inside:
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/03/LinkEffects_04.png?x86293)
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!