RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

+j+2BnaQSkzkNe0dpNHl103pbsRtVlBy3Ivqpwb7bho=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

0ACb5hSoxo1svvHlhJqD4sUSDGJ97B1kBGWGGxycXu4=

6s1k2w6SLnWj64d28WQrv9HQMxjAQ6/qFXIbthFaqKc=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

BEaEBzmJ+dCz7bi9Xenx+kQRiui5/usgymUiFzHdUSk=

EA6pIl34ynZu2fCXtDsf5N+8HjgmFW1iWFEJidJmjwE=

JCIMc2jHTforX4kLxzXeocMmrYb+LnAgwZU0w3bCzQY=

JseFDRfctUKg1rAF0E6mL1YOHzQe1gVou75Mw8zcVOY=

LtNTzuGC6a/O4opneIzFRwuxaT7A0jTPzl4xxFVOaJU=

OKA/wpW5U0/bGFF7Bsd9Jpz9vIcGmsLeCg4ac42B+uM=

P7vOA+qkoiRS/9UWXIUHxm+CI0lSj7WY2ZBiK9KyND4=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

Qdld2j63j/MIDqhyo7Y3RiOeFhBqJglREH2O+FwXR9I=

Rf1eI8pDEJSkptFB/XWlj0IN7pQXjrNngR5tBDx8ihI=

Sf9qPmyeAJlqj4x6Kz5SNESMv5Qs7ARqsnNruitgYpA=

USOHvTUI3mh2ib/mMwbKTyTADvigSfSmb3MXH/HsN6A=

XGglpWsF+VpgOjXfIqzwrxv0n1E+aPydxJbt23zu0UA=

Zf6XyBzSm/LtmgDvoXinw+Hi6BMMwoaUJHcowJ8ikX0=

eDXaquyPVYoFNZ+HLRFOqPbAk7N1nlRiJhbhe4g83Es=

gok0DFmTbYmfgm71+6/UBa9YMdK9fta9tVCYCvw0mUk=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

n9lKHF86NGBCOKJ/o3Xl/F++i0ke7eTshw4YJ60x+20=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

qriyvYyof2e0nw26zR6JThjy67bKClLhvHTizM7yDcg=

tOlureLazS6/pYwbqdKmud6Bvaf9nA4m71Uoyrhnjxo=

wV9d2LzLij/UwbGC8MXX+RHNBZ5d/rww134rq+krlJQ=

whJ3jNLC0SO8XSaY/XPhiyr+uvZwcHDCMcIF6SZYwb8=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

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

A live, drawing canvas where you can influence the pixels. 

Interactivity can make visitors feel engaged in a fun way. I used sketch.js for the drawing canvas. Use your cursor or touch to draw right on the screen.

David's portfolio - https://www.davidfiz.com was one of the most pleasant landing pages I've seen, and I wanted to see if I could rebuild it with a touch of design. I have layered lots of interactions on top. Sketch.js is used for the drawing effect.

Interactive Sketch Portfolio

Dhruv Sachdev

This cloneable features a circular magnetic CTA & trailing custom cursor.

Circletype.js was used for the circular text. You can change the text and the circle radius will auto-calculate.

Inspired by the brilliant https://www.forstellar.com design by Jomor.

Circular CTA

Magnetic Call To Action

Magnetic Call To Action

Description

More by Dhruv Sachdev