Close

Switch like checkbox

This is an example of a responsive checkbox designed with HTML and CSS. The switch is given the type ‘checkbox'. It is a switch that adjusts to the size of the screen. The button has been added with the URL imported to the code. Variables have been used to define colors and fonts to avoid using them again and again in different places. Those variables are $hue: 200, $light: hsl($hue - 40,90%,85%), $base: hsl($hue - 20,10%,70%), $mid: hsl($hue + 20,40%,30%), $dark: hsl($hue + 40,100%,10%) and $sans: 'Open Sans', sans-serif. The body of the form is given a style set of height as 100vh, width as 100vw, background as linear-gradient (lighten ($base, 8%), darken ($base, 8%)) and font-family as $sans. The switch is given a style set of position as fixed, bottom as 8px, right as 8px, font-size as 12px, font-weight as 100, font-family as sans-serif, color as rgba(0,0,0,0.4), and letter-spacing as 2px. Source: https://codepen.io/nathantaylor/pen/jyVeYp

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.