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

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

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

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

James Baduor

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

Link-in-bio like never before

Tony Seets

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 Link Hover

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)

‪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)

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

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

102976941

1038319252

gpt-4.1-nano

1070795817

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-4-5

1186914386

claude-opus-4-6

1274323923

140432223

1462086697

1506258256

1514009179

1567550242

1592612642

1609688815

1621889036

1631162196

1692956854

1726628865

173927913

1771795565

1863160016

1870758752

1905118106

1975670756

2025032126

2030598753

Outliant

Hireclix

Refokus

Kinetic

Heco

2144870841

2167006968

2216482092

2250401860

2351366352

2355632600

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

2401116685

2486364096

gpt-4o

gpt-4.1

gpt-4o-mini

2493307210

2546957535

2624148589

2717840929

2789269995

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

3022611874

3023147062

3026881092

3070246498

307653616

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

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3452464914

3458155273

gemini-3-flash-preview

3497785011

3590523401

3591394191

3637361732

Content Brief Generator

Credentials Demo

Fibonacci Hammer

MCP Demo

Variables Demo

3661799733

3669004489

3737116140

3844506029

3879263312

Learn best practices for collaborating with clients in Webflow.

Sell your apps on the Webflow Marketplace.

Learn about structuring seats, roles, and permissions in your Workspace

Partner with Webflow to build your business alongside 2M+ creators and developers

Request access for your team to collaborate in a client’s Workspace.

Charge your client for a Site plan directly in Webflow.

Earn more by selling templates on the Marketplace.

Start building your site with AI, a prebuilt template, or from scratch.

Add your team members to start collaborating on sites.

Watch a quick intro to what you can build in Webflow.

3913199261

392490161

3934148661

3941255684

3956476210

3960693283

3972857978

4040286650

4063605209

4092459378

4092855684

4094645560

4103643638

4144203485

4178901499

4195171643

4206156914

4235582168

Best Link Websites | Free Examples & Designs

Discover Link websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Link websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Link websites
built by the Webflow community