Close

Neuomorphic Checkboxes

This is an example of a web form with neuomorphic checkboxes container, designed using HTML, CSS, and Bootstrap framework 4. The icons and fonts are imported to the code with their URLs. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the icons in an orderly manner. The body of the form is given the styles of display as flex, justify-content as center, align-items as center, min-height as 100vh, and background as #ebf5fc. The checkbox icons are given a background color of #6a9bd8. The checkbox container is given the styles of width and height as 60px, background as #ebf5fc, display as flex, justify-content as center, align-items as center, box-shadow as -2px -2px 5px rgba(255, 255, 255, 1), 3px 3px 5px rgba(0, 0, 0, 0.1), and border-radius as 10px. The checkbox icons take a box-shadow effect of -2px -2px 5px rgba(255, 255, 255, 1), 3px 3px 5px rgba(0, 0, 0, 0.1), when they are in checked mode. Source: https://codepen.io/braydoncoyer/pen/yLyrWOq

Post Comment or Questions

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

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.