Close

Toggle Buttons

This is an example of a toggle buttons card layout with animations, designed using CSS, HTML, and Bootstrap framework 4. The icons and CSS styles are imported to the code with their URLs, whereas media queries have been used to increase the responsiveness of the form. The form has eight toggle button container cards named as Normal, Transparent, Yes & No, Gravity, Pancake Stacks, Doggo Wants a Treat, Kobe Bryant Tribute, and Beer Pong. The body of the form is given a background color of #2e394d, whereas the toggle button containers are given eight different background colors. The colors are #dec387, #de8797, #87aade, #c5de87, #87ded2, #c487de, #de8787, and #decf87. The title of the toggle button container is given the styles of font as 500 14px 'Rubik', sans-serif, letter-spacing as .5px, text-transform as uppercase, and text-shadow as 0 1px 1px rgba(0,0,0,0.4). The toggle buttons are given the styles of width as 7em, background as #2e394d, height as 3em, display as inline-block, border-radius as 50px, margin as 40px, transition as all .3s ease, transform-origin as 20% center, and cursor as pointer to get the hand cursor effect on a hover event. The toggle buttons take different animations such as rotating, hooping, and rolling over when the buttons are checked as active. Source: https://codepen.io/oliviale/pen/xxboXzo

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.