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. Required fields are marked *

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.