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