Close

Gooey toggle switch

This is an example of a gooey toggle switch designed using HTML and CSS. The toggle is given the input type of ‘checkbox'. The background color of the form is set with #2C4159 and the background of the toggle button with #151B25. The form is given a style set of position as absolute, height as 100px, width as 260px, padding as 10px 0 and transform as translate3d (-50%,-50%,0). The bubble is given a set of styles of position as absolute, transform as translate3d(-75%,-50%,0), border-radius as 50% 50% 50% 50% / 50% 50% 50% 50% background as #BBBBBB and an animation as toggle-reverse 2s 1. On a clicked event, the bubble will take the styles of animation as toggle 2s 1, transform as translate3d (75%,-50%, 0), transform as rotate (45deg), transition as 500ms ease all 1.25s and background as #3CCC97. The ‘toggle' and ‘toggle reverse' events are given their own transition styles. Source: https://codepen.io/onediv/pen/pjgNqJ

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *