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

Dhruv Sachdev

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 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.

Automatic Link Preview

Timothy Ricks

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

SVG Map

Katalin

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!


Link hover animations

Jonas Arleth

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

Easy Magnetic Elements and Buttons | Template

Will Gibson

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

[CLONEABLE] Dropdown Menu

Jon Larson

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 on Hover - Mobile Responsive

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 external link in your Webflow project

Blair McDonald

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.

Social Link In Bio Alternative

John D. Saunders

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 Template

Bradley Stallcup

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

The Quo Repo Project

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 and jump to next page (Cloneable)

Francesco Castronuovo

Today, we’ll build a set of hover underline animations in Webflow — powered by box-shadow and smooth CSS transitions.

You’ll learn how to:

✅ Create a growing underline from the bottom
✅ Animate from the top, left, and right
✅ Build a full-height underline effect
✅ Even animate multiple borders at once with a simple trick

No custom code needed — just smart use of styles and transitions.

👉 Watch on YouTube: https://youtu.be/bTXWsrMSPaY

Smooth Hover Underline Effects (with Box-Shadow)

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

Minim Link In Bio

‪elyakim goldfus‬‏

Figma file: https://shorturl.at/cIJY6

✨ Enhances user engagement
💻 Adds intrigue to website navigation
⏱️ Increases users time in your website
📍 Gives users certainty about their destination
🖼️ Visual preview for a clearer understanding
😌 Easily customize colors and motion to fit your audience

Example ideas:
• E-commerce Websites: Highlight specific product categories or promotions to entice visitors to explore further.
• Travel Websites: Display stunning destination images to inspire travelers and encourage them to learn more about the featured locations.
• News or Blog Websites: Offer a glimpse of featured articles or breaking news to encourage readers to click and read more.

Sneak Pic Into Link Button (Button 24)

Casey Muns

A handy JavaScript to mirror mouse clicks from one element to another. Works great for replacing tabs menus with custom links.

Click Mirror - by muns.dev

Memberstack

Happy Monday!

I've whipped up something I think you'll find handy: Member Script #74. With it, you can dynamically tweak the styling of any element on your site using just a link parameter.

www.memberstack.com/scripts/74-styling-with-link-parameters

Want to change a button color or show hidden content with a simple link click? This script's got you covered. Just target a class name and decide the inline style you'd like to apply. Currently, it's set for one style parameter per element, but I'm eager to hear if you think there's room for more.

I'd truly appreciate any feedback or questions you might have. Thanks for taking the time to check this out!

Best,
Duncan

Link Parameters

Robin Granqvist

Just a simple link interaction. Works quite well on most sites. Powered by GSAP.

Simple GSAP Link - 57/365

102022939

1026885926

102976941

1038319252

gpt-5-nano

1098530826

gpt-4.1-mini

112746687

Get direct access to benefits like unlimited staging sites and more control over roles & permissions

Unlock more for your business with the

1131232030

Custom code and scripts won’t be supported.

Custom code

You won’t be able to export HTML and CSS files.

Code export

You won’t be able to manage site-level access and publishing.

Site-level roles & permissions

{{count}} {{sites}} {{exceed}} client seat limit. Excess seats will be removed.

Client seats

Free guest access to client Workspaces won’t be available.

Guest access

Staging sites will be unhosted with limited CMS, and no passwords or redirects.

Staging sites

1138017326

claude-sonnet-5

1181518147

1186914386

claude-opus-5

119812244

1207293145

1249999967

1270011358

1274323923

1338389614

140432223

1444732314

1462086697

1472415557

1506258256

1514009179

15382271

1559290700

1567550242

1592612642

1609688815

1621889036

1631162196

1674778404

1692956854

1696523225

17004821

1726628865

173867728

173927913

1768015773

gpt-5.5

1771795565

1863160016

1870758752

1905118106

1919353748

193274770

193713651

1960278590

1975670756

1977767562

2025032126

2030598753

Outliant

Hireclix

Refokus

Kinetic

Heco

2031366339

2104957652

2144870841

2147413158

2167006968

2216482092

2243824526

2250401860

225169335

2256326107

2291666157

2320791503

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2355832585

2401116685

2401437500

2486364096

gpt-4o

gpt-5-mini

gpt-4o-mini

2493307210

2546957535

2556595834

2624148589

2639613659

265457401

2717840929

2749253609

2789269995

2826734787

2842505721

284989039

285302288

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

2940878268

2972123611

2977143887

3022611874

3023147062

3026881092

3040272982

3056387847

3057360577

3070246498

307653616

3099012871

3106924665

3108168977

3112069432

3120801339

3125710258

3151661775

3162101956

301 Redirects

Custom Code

Code Export

Site Transfer

Join client workspaces for free and add up to 5 users from your workspace

Guest Access

Limited seats available, n sites will have client seats removed

Client Seats

Staging sites will be unhosted with limited CMS and no passwords or redirects.

Staging Sites

3201643127

3220870747

32368712

3238278814

3256408208

3258716925

3266482432

3289310561

3313039722

Best Link Websites | Free Examples & Designs

Discover Link websites
built by the Webflow community

Start with a clone. Make it yours with an AI agent.

Discover Link websites built by the Webflow community

Start with a clone. Make it yours with an AI agent.

Discover Link websites
built by the Webflow community