Discover the best link websites created by professional designers. Get inspired and start planning your perfect link web design today!

Here are 20 Plug & Play CSS-only link hover effects for your next project! 

Subtle line animations can be a simple way to enhance your site experience through delightful micro-interactions.

Inspired and adapted for Webflow from: https://github.com/codrops/LineHoverStyles

*includes 21 effects, but 20 sounds cleaner.

20 Link Effects

20 Line Hover Animations

Let site visitors preview external links by hovering over the text. This plug-and-play feature allows you to get a link preview without leaving :)

How it works:
It extracts external links on load, grabs a screenshot then reveals the preview on hover. 

Since the card's position is calculated using custom code - it works with inline links and link blocks.

Just change the external link, and the preview will be updated automatically. Replace the demo screenshot API I've used with your own on live builds.

The project also includes a static version where you can manually upload a preview if you prefer—inspired by https://uiw.tf components. Fully built-in Webflow.

Popup Links

Automatic Link Preview

A simple but effective hover effect to reveal an inline image within some link text. Great for big and bold hero CTAs.

If this has helped you in any way, please consider buying me a coffee! buymeacoffee.com/samhodges88

Thanks!

Hover Text to reveal Inline Image

Hover Link to Reveal Image

Watch the tutorial for this map at https://www.youtube.com/watch?v=Iz_6IBfCtBQ

SVG Map

For the trick to work, you need to paste the custom CSS code from the embed field into your project. The arrow icon can be replaced by your own SVG image in the CSS code. After that, you may need to adjust the spacing and sizes in the CSS code. If you use em for the sizes, the icon will automatically adjust when you use a larger font size.

Automatically add an arrow icon to every link

Automatically add an arrow icon to every external link in your Webflow project

A tutorial how you can quickly give any element in Webflow a magnetic effect. This is known especially from buttons of all kinds and is easy to implement with just one interaction, which you can then apply everywhere via a CSS class.

Tutorial: 
https://youtu.be/1iFp2iOq5pI

Magnetic Button

Easy Magnetic Elements and Buttons | Template

A responsive, CMS connected Webflow project to use as a self-hosted alternative to social 'link in bio' tools such as Linktree (linktr.ee). 

By hosting your own link in bio page, you benefit from centralised editing, have additional styling options and direct all social link traffic to your site, rather than a third party's. There have also been reports of accounts being penalised on Instagram for using third party link in bio apps such as Linktree.

The project is free to clone and comes with both CMS connected and static versions, as well as instructions.

Link In Bio

Social Link In Bio Alternative

Link In Bio - Free Cloneable Template on Webflow

Instagram only gives you ONE link to showcase your BEST link.  I say "we won't have it!" 

So, I put together a FREE cloneable that allows you to add a Link in Bio Page to your website with ease.  Get 3 templates, absolutely free to build your amazing Link in Bio Page for your website to showcase your favorite social media links.

Link In Bio Page Template

Link In Bio Template

Hey Everyone, this is 16 css-only hover animations for links!
Animations no.01 & no.16  are made with embedded CSS code- you'll find the embeds at each belonging link.
Animation no.04 is made by simply changing the "hover state" of the link.
Animation no.15 is made partially by changing the hover state of the link-text (the gradient clipping to the bg) + a Webflow interaction of the link.

 First I thought to go for inspirations to tympanus.net for this project, but I saw that there's already a really cool cloneable for that: https://css-link-effects.webflow.io/, so I've searched across the web for inspirations to make different link animations from those.
For the link hover animation with squiggly lines all credits goes to Nikolai Bain: https://www.youtube.com/watch?v=uLyyQ1XTNfA  
I hope you can use some of these links for your next Webflow sites!


simple hover animations for links

Link hover animations

A simple dropdown menu with two dropdown configurations. Only built for desktop breakpoint - mobile coming soon.

Menu Dropdown

[CLONEABLE] Dropdown Menu

Inspired by an interaction I saw online and wanted to build in Webflow. Background images are set on unique combo classes, each base class set with a size/filter/bg color animation. Mobile responsive with a click IX while the desktop is hover. Sized by width percentage for desktop and height on mobile.

Built on Finsweet client-first clone.

Expanding Gallery View

Expanding Gallery on Hover - Mobile Responsive

I saw some neato buttons on Gabriel Norman's site so I had a little fun making them.

Check out his slick site.
gnrm.se

Underline Link Buttons

underline-link-buttons

Grow your audience and monetize with one link that focuses on you.

TakeMeTo Landing Page

Link-in-bio like never before

Here is an example on a website that allows users to scroll down towards the bottom of the page, then trigger a link to the next page. 

The code making this possible is available for you to customize it with your own links to pages. 

If finding this useful and you want to show your appreciation, please subscribe to our Youtube channel: https://www.youtube.com/channel/UCOpQffrF5Y79_fWGSXfBqDw

Scroll to bottom then link to next page

Scroll to bottom and jump to next page (Cloneable)

Custom CSS to target only the "Current" link with Webflow's .w--current class. This changes the color on hover from the original (green) to an alternate color (purple) while leaving the other links unaffected.

This also uses Webflow IX to show an underline element on the hover of the links. Without the custom code the "Current" page link, on hover, would stay green.

current-state-link

Current Link Hover

Hi my gorgeous friends of Webflow,

This is a very easy one, but it is something that I came across very recently, so I though it would be beautiful to share it anyway. :)

Adding an inner shadow - with "Distance" being the only parameter not equal to 0 - is a smart way to create growing-from-bottom underline effect on hover for your links.

Enjoy and feel free to leave a comment!

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Link Underline On Hover

Link Growing From Bottom Underline On Hover

Why pay for for Linktree or whatever when you have your Webflow powerrrs?
Make whatever you want, but this'll help you get started.

Discover link websites built by the Webflow community

Discover link websites built by the Webflow community