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.
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.
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.
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.