Close

Airplane Mode Toggle Switch

This is an airplane mode toggle switch with animations, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. JavaScript functions have been used to implement the animations on the toggle switch. The toggle button is designed to display animations when switched to the fly mode. The icons and images are imported to the code with their URLs. The colors are predefined as --color-background-off: #4e4e4e, --color-off: #494949, --shadow-off: 0 1.2rem 1.5rem #4d4d4d, --color-background-on: #2f86d5, --color-on: #1AB1FD, and --shadow-on: 0 1.2rem 1.5rem #2c82cc. The body of the form is given the styles of align-items as center, and background as var(--color-background-off). The width and height for the switch are defined as 31.1rem, and 13.8rem, while the border-radius is set as 10rem. The cursor style for the switch is set as pointer to get the hand cursor effect. The background color of the form is set to #848484 when the switch is in airport mode. The background color changes to #78c7fe when the button is switched to sky mode. Source: https://codepen.io/KiarashZ/pen/dyPLpaP

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 *

Several Related Snippets

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