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

Saw an interesting interaction online and thought I'd try to translate it into webflow. I also added the same interaction on scroll over for mobile, so nobody gets left out! Clone away, Webflow-ites!

Circular Hover Effect

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

Folks really seemed to enjoy my original Circular Hover Effects cloneable project (https://webflow.com/website/circular-hover), so I decided to turn it into a series. Next up: buttons with some fun circular hover effects! Clone away, and let me know what you think in the comments!

Button Circular Hover Effects

Circular Hover Effect: Buttons

Welcome to another funky circular Webflow experiment! This time, I use only Link Blocks (no interactions necessary) paired with SVGs to create a nifty little menu active state. Pairs nicely with the last circular cloneable project I made ;)

Clone away, Webflow-ers!

Menu Active Circular Transition

Active Menu Circular Transition

Hi my gorgeous friends of Webflow,

This project contains a cool circular responsive progress bar - built with absolutely no code - that you could use as a pre-loader for your website.

Enjoy and feel free to leave a comment!

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

No-Code Circular Progress Bar

A free to clone / copy / paste animated menu button with four smaller circles which show/hide on click or tap.

Thumb-friendly on mobile devices!

Potentially (if enlarged) the animation could be re-purposed to show content eg: a main image in the large circle with smaller images in the other 4 - maybe team member links / alternative views of clothing items...

Let me know what you create - and ideas for future clonable items :-)

If you like the image, be sure to show some love to the original photographer via Unsplash - link in project. Thanks also to CyberDave for his ideas on alternate structure.

CP2 - Circle Nav - Hide/Show

Freebie - Circle Nav - Hide/Show

Dark/night mode with no custom code, along with a bonus reveal on hover interaction (both are responsive on all viewport sizes). I hope you find this useful :)

Night Mode

Dark/Night Mode + Reveal Image on Link Hover

Creating circular background video with a transparent gap between the video and the border.

Circular background video

circular-background-video-showcase

OceanSafe is a textile technology company for circular, biodegradable, and toxin-free textiles. The core of their solutions is proprietary biodegradable synthetic textile fibers and yarns.

You can find the live page here: https://oceansafe.co

OceanSafe

OceanSafe Textiles

Olyn is the leading open platform supporting a standard framework for digital asset registry. Our platform offers a set of products and tools which enable the creation, aggregation, management, and distribution of those Digital Assets across different ecosystems by supporting and empowering the interaction between consumers, brands, retailers, merchants, services providers, online marketplaces on a secure and normalized Framework.