Close

Settings Panel Toggles

This is an example of a bootstrap settings panel with toggle feature, designed using HTML, CSS, JavaScript, and bootstrap framework 4. The icons and fonts are imported to the form with their URLs. Media queries have been used to increase the responsiveness of the form. JavaScript functions have been used to implement the toggle, radio item, and slider features. All the colors are predefined as variables. The body of the form is given a style set of font-size as 1.6rem, font-family as 'Heebo', system-UI, and text-shadow as 0px 1px 1px dark (#9c88ff). The container card is given a background color of #9c88ff, max-width of 1200px, border-radius as .8rem, and margin-bottom as 2rem. The toolbar dots are given the background colors of #EA6759, #FFCC00, and #2DCC72, and a border radius of 50%, which take a transform effect of scale(1.1), and a box-shadow effect of inset 0px 0px 3px rgba(white, .1), in a hover event. The toggle buttons are given a width of 62px, height of 32px, margin of 4px, background as dark (#9c88ff), border-radius as 999px, cursor as pointer to get the hand cursor effect, and a transform of translate (-50%), which take the background color white when they’re active. Source: https://codepen.io/makhtar/pen/zYYQOVm

Post Comment or Questions

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

Your email address will not be published.

Several Related Snippets

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