Follow us on - Dribbble | Twitter | Facebook

Fluid switch using CSS3

fluid-switch-css3

Hi… 🙂 Here is the simple fun interaction for a fluid switch with css3 inspired from dribbble shot – Leo Zakour.  In this tutorial, I focused on how to create switch button, I’ll show you how to create an AM/PM fluid switch with CSS without using javascript. Let’s see how it’s working.

 

Read Also

Animated Elastic Switch Button using CSS3

Toggle button with css3

 

How is it working?

Basic thing for the checkbox is which is either checked or unchecked. Instead of browser default checkbox, We can customize(ie. checkbox hack).

The checkbox hack allows us to have a toggle handler in pure CSS using :checked pseudo-selector, and a sibling selector (~ or +). Basically, say “if the checkbox is checked, then the following X element have separate styles”.

HTML Element

Create switch structure using below code

Now, create SVG feGaussianBlur and feColorMatrix.

Gooey effect also used in pagintaion Gooey animation in pagination using SVG

  
    
      
      
    
  

CSS

Apply fluid filter to the switch container

.switch{filter: url("index.html#fluid");-webkit-filter: url("#fluid"); width: 100%; height: 100%;}

Read toggle button with css3, discussed about CSS3 switch functionality and animation.

Check the fluid switch demo
Thank you for reading this tutorial, and if you have any question or related work to show, please do. ?

You may also like