Close

Folder list with checkbox and transform effect

This is an example of a folder list with a checkbox and transform effect, designed using HTML, CSS, and Bootstrap framework 4. The folder icons are imported to the code by the URLs. The body of the form is given a background color as #4527A0. The list items are given a style set of margin-top as 10px, background color as #5E35B1, cursor style as pointer to get the hand cursor effect in hover, and transition as all 0.3s ease-in-out. The list items take a transform effect of scaleX(1.1) in a hover event, to change the scale of the folder items. The opacity of the checkbox is set as 0, which changes to 1 in a hover event. The checkbox is given a border style of 1px solid #10a3f9, border-radius as 3px, and background color as white, which changes to border as solid #007bff, border width as 0 2px 2px 0, and takes a transform effect of rotate(45deg), in a checked event. Source:https://bbbootstrap.com/snippets/bootstrap-folder-list-checkbox-and-transform-effect-16091735

Post Comment or Questions

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

Your email address will not be published.

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

Several Related Snippets

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