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.

This site uses Akismet to reduce spam. Learn how your comment data is processed.