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

This is an example of a form with flat checkboxes designed with CSS and HTML. Checkboxes are given the input type of ‘checkbox' and their city names the type ‘label'. The body has been given the styles of font-family as "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif, color as #7F8C9A, and a background as #FCFDFD whereas the header 1 and header 2 have been given the styles of colors as #1ABC9C and #aaa, margin-bottom as 5px, font-weight as normal and text-align as center. The styles for the checkboxes are given by dividing them as ‘checked' and ‘not checked'. The styles for the left part of the button on unchecked event are set as width and height as 30px, transition as all .2s, border-radius as 6px 0 0 6px and background color as #7F8C9A whereas the right part is set as width as 80px, height as 30px, border-radius as 6px, transition as background-color .2s and background: #DDDDDD. On a checked event, the background will change to #34495E and #39D2B4 and the border-radius to 0 6px 6px 0. Source: https://codepen.io/ARS/pen/aeDHE

This is an example of a form with checkboxes and toggle buttons with the use of HTML, CSS, and JavaScript. JavaScript functions have been used to make the form responsive by checking the width of the screen. If the width is less than 400px, the mobile class will be added with the use of add class to apply the mobile view whereas if the width is greater than 400px, the mobile class will be removed with the use of remove class. The CSS class switch has been used for the toggle button which consists of height as 4.4rem, overflow as hidden, width as 7 rem, position as relative, display as inline-block, margin as 0, and padding as 0 whereas the switch label has the styles of width as 100%, font size as 0.5rem, and text-align as center. The CSS style class text transformation has been used with the value of uppercase to convert the text to uppercase. The hover class has been used with the style of cursor as pointer so the mouse pointer will be displayed on the toggle button on a mouse hover event. The style display has been used with the value ‘none' to hide the elements. Source: https://codepen.io/jcgilmore2/pen/PZpmaK

This is an example of a web form with a list of checkboxes designed with CSS and HTML. The checkboxes can be signed off. Li" element has been used to arrange the boxes in a list view. The boxes are given the type ‘checkbox'. There are three checkboxes in the list. The body of the form has the styles of display as flex, justify-content as center, align-items as center, margin as 0, padding: 0, width and height as 100%, background-color as #1abc9c, and font-family as 'Roboto', sans-serif. The CSS style cursor is set with the value of pointer to make the cursor look like a hand. Also, the CSS style appearance has been used with the value as none and opacity as 0 to hide the checkboxes. Source: https://codepen.io/derekmorash/pen/Eydxab

This is an example of a web form with a list of checkboxes designed with CSS and HTML. Li" element has been used to arrange the boxes in a list view. The boxes are given the type ‘checkbox'. Variables have been created to define the colors, distances and font size to store values in CSS so variable names could be used repeatedly to avoid setting the same value in different places. Those pre-defined variables are, $baseFontSize: 16, $green: #009688, $blue: #5677fc, $blueDark: #3b50ce, $slideDistance: 100, and $slideDuration: .4s. The background color of the body is set with #009688 whereas the CSS style cursor is set with the value of pointer to make the cursor look like a hand. Source: https://codepen.io/Sambego/pen/zDLxe

This is an example of a switch button designed with CSS, HTML and JavaScript. The JavaScript functions have been used to change colors according to the switch value. The switch is a ‘checkbox' that switches between blue and red which also changes the color of the background accordingly. The font type is imported from Google with the URL and the label is set with the styles of font-family as "Roboto Condensed", sans-serif. Variables have been created to define the colors and font type to store values in CSS so variable names could be used repeatedly to avoid setting the same value in different places. Those variables are $primary-color: #739ce6, $primary-color-dark: darken ($primary-color, 10%), $primary-color-tint: lighten ($primary-color, 20%), $secondary-color: #e65a62, $secondary-color-dark: darken ($secondary-color, 10%), $secondary-color-tint: lighten ($secondary-color, 20%), $primary-font: "Roboto Condensed", sans-serif and $black: #394a5a. The body is initially set to the styles of background-color as $primary-color, font-family as $primary-font, font-size as 16px, and line-height: 1.875em. After the switch, its color style change to background-color: $secondary-color. Source: https://codepen.io/tiffachoo/pen/RKoeqg