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

Memberstack

I do a lot of reading on my laptop and tablet. The ability to change the background-color and font-color on demand keeps my eyes and/or head from aching. If you have late night readers on your sites, they might thank you for implementing something like this. It's exceptionally easy to do with Webflow.

I made the CSS sun and moon for fun. In real life, I would use a much smaller toggle that follows the reader the down the page.

Nightmode

Night Mode for Blogs & Articles | Cloneable

Tutorial: https://www.youtube.com/watch?v=Q17Q5-isg0I

Based on this shot by Cuberto https://dribbble.com/shots/6358927-Mitosis-After-Effects

Note: This experimental goo effect does not yet work on Safari.

Gooey Card Effect

I'm a Product Designer and I just finished building my portfolio site from scratch on Webflow.

Olivier Ifrah

Portfolio - Olivier Ifrah

Watch the YouTube tutorial here (german): 
https://youtu.be/VaVwYP5-nnk

Website Mobile Navigation

Website Mobile Navigation (user friendly)

[edit: this is no longer possible via this method]

I had some fun turning the Webflow Checkbox component into an animated Toggle Switch, using only Webflow Interactions.

Toggle Switch

Animated Toggle Switch

Updated: Oct 10 2019
-------------------------------
- Now runs solely on Webflows Interactions 2.0
- Includes Lottie Animation from https://useanimations.com/ for + icon
- SVG Code for FAQ Icon so you can change the color


Updated: Aug 22 2019
-------------------------------
- Design changes
- Accordion title wraps properly now
- Accordion wrapped in block so it's easy to copy & paste
- Functions smoother
- Accordion is now responsive


Enjoy!

FAQ NO CODE

Accordion (No-Code)

I'll show you a trick to control the size of CMS elements via a toggle to give your clients more flexibility in displaying CMS collections in Webflow.

Each CMS element has an example toggle "medium", "large" and "align Center". As soon as one of these options is active, a class is added to the element "grid-item" via custom code, which changes the size of the element or the alignment. The classes and sizes of the grid items can be changed in the hidden section-cms-grid. In order for it to work, the embed field in each CMS item and the jQuery code must be added.

Tutorial: https://youtu.be/DsuCGRSgJIk

Control Sizing of CMS Items with a Toggle

From my Webflow online course community came the wish to build this video player, which basically runs in a loop without sound as a background video. 
If you click on on the unmute button, the video plays from the beginning and the sound is activated.  

We need a bit of custom jQuery code for this. In addition, the Vimeo API must be included if you want to address Vimeo iFrames.

Watch the tutorial here: https://youtu.be/mKFZxHpYGng

Vimeo Background Video with Play Sound Toggle

MemberStack freebie #7! 

A simple pricing table with monthly or yearly pricing - Inspired by UberConference. 

The site is mobile friendly, user-friendly, and designer-friendly. I hope it comes in handy on a future project!

MemberStack is not required to use this project. 

If you need any help, you can reach us via the chat on MemberStack.io or our email team@memberstack.io.

#7 - Three-tier Pricing w/ Toggle

#7 - Three-tier pricing w/ Toggle

Hey Webflow fam! 💙

Today I wanna share a special interactive component with you that I made for one of my previous personal websites. It's an interactive call-to-action toggle that expands into contact options. Perfect to put on the right bottom corner of your website! 

⚡️ Interactions are completely done in Webflow Interactions without custom code. 
✨ The icon animations are made with Lottie. 

Feel free to use this in your projects! 

If you like this freebie share it with your Webflow friends and leave a follow or like to never miss a new freebie! 💎

Cheers,
Cédric

Interactive Call to Action Button

Call to Action Toggle

Hey Webflowers!

In today's cloneable I show you how you can adapt your website to the color appearance of the native device OS settings. If the settings are on light mode, the website will appear in default white as designed in Webflow, and if dark mode is triggered, the site will turn black. ⚡️

✅ 100% CSS 
✅  Custom Code
🆓 Cloneable

To see this effect in action just change your OS color appearance.

Feel free to clone this and use it for your next project! ✨
Follow me for more Webflow freebies in the future 💙

Native Light/Dark Mode

Native Light/Dark Mode Appearance

Hey! 👋

Here's a clean language toggle button that can be implemented into your own websites. We have included 100s of flags so that you can match these with any language you require. We recently partnered with the leading webflow multi-language solution - Weglot.

💰💰💰 Save 15% of Webflow Multi-Language with our code 💰💰💰

FLOWB15

⁃⁃⁃⁃⁃⁃⁃⁃

🥰 Support Us:

𝙄𝙛 𝙮𝙤𝙪 𝙚𝙣𝙟𝙤𝙮 𝙤𝙪𝙧 𝙘𝙤𝙣𝙩𝙚𝙣𝙩, 𝙥𝙡𝙚𝙖𝙨𝙚 𝙘𝙤𝙣𝙨𝙞𝙙𝙚𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩𝙞𝙣𝙜 𝙪𝙨 𝙤𝙣 𝙤𝙪𝙧 𝙨𝙤𝙘𝙞𝙖𝙡 𝙘𝙝𝙖𝙣𝙣𝙚𝙡𝙨. 𝙔𝙤𝙪𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩 𝙝𝙚𝙡𝙥𝙨 𝙪𝙨 𝙜𝙧𝙤𝙬 𝙩𝙝𝙧𝙤𝙪𝙜𝙝 𝙧𝙚𝙖𝙘𝙝𝙞𝙣𝙜 𝙛𝙪𝙧𝙩𝙝𝙚𝙧!

⦿ Website @ www.flowbase.co
⦿ Webflow @ www.webflow.com/flowbase
⦿ Twitter @ www.twitter.com/t_bekkers
⦿ Instagram @ www.instagram.com/flowbase.co

⁃⁃⁃⁃⁃⁃⁃

✒️ Licence Notes:

⦿ Images available under CC0 (Unsplash, Pexels, Freepix or Similar)
⦿Typography available under SIL Open Font License 1.1 (Inter)
⦿ Iconography available under CC0 (UpLabs, Flaticon, Noun Project)

Webflow Language Selector (CLONE)

Language Toggle Component (CLONE)

Toggle dark mode on and off with the click/tap of a button!

No Code Dark Mode

Watch tutorial at https://www.patreon.com/posts/66950007

Assets from codesandbox.io

Persistent Dark Mode Switch

Easily toggle between light and dark mode.

Theme Switch

This is a nice little clonable for form toggle switches without the use of webflow interactions.
---
1. Place a checkbox in your form (use custom checkbox option)
2. Style your checkbox like a toggle box
3. Place the dot as a svg image
4. Style checked state: move the dot to the right / change background color
5. On normal state: add transition to background-position and background-color property
---
Done 🎉

Form Toggle Switch

Animated Toggle Switch for Forms without Interactions

Feel free to clone the button!
I'd love to see how you're using it, so please comment with a link to your website if you use it :-)

Apple's Toggle Button

toggle-button

Created this project so that the community could use Bootstrap Toggle — a third-party library that converts checkboxes to toggles — without needing to import all of Bootstrap's classes and styles.

I've defined all of Bootstrap's default colors in a style guide, so you can alter the colors yourself visually without having to touch a line of code. I also wrote a full tutorial on this, which you can access below!

Hope this helps!

FULL TUTORIAL: www.visualdev.fm/post/converting-checkboxes-to-toggles-with-bootstrap-toggle

Discover toggle websites built by the Webflow community

Discover toggle websites built by the Webflow community