Close

Nicely animated Checkbox

This is an example of a simple animated checkbox designed using just CSS and HTML. The box is given the type ‘checkbox' and the name ‘check'. The body of the form is given the styles of background-color as #1790b5, height as 100% and font-family as 'Open Sans', sans-serif. The checkbox has been given the text-align as center, display as table-cell, and position as relative and the cursor as pointer to make the cursor look like a hand on a hover event. The checkbox object has the styles of display as inline-block, position as relative, background-color as transparent, width and height as 25px, border as 2px solid #fff, border-radius as 50% and transition as background-color 150ms 200ms, transform 350ms cubic-bezier(.78,-1.22,.17,1.89). CSS style display has been set to none for the input type to hide the system checkbox. Source: https://codepen.io/north-of-rapture/pen/rWqega

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.