Close

Radio Buttons With Hopping Animation

This is an example of a web form with radio buttons with hopping animations, designed using HTML, CSS, and Bootstrap framework 4. The body of the form is given a style set of background color as #f1f1f1, font color as #171717, display as flex, font as 1em Ubuntu, sans-serif, height as 100vh, line-height as 1.5, and padding as 1.5em 0. The animation timing, duration, and colors are predefined as $wormDur: 0.4s, $radioDur: 0.2s, $timing1: cubic-bezier(0.45,0.05,0.55,0.95), $timing2: cubic-bezier(0.5,0,0.5,2), and $shadowColor: rgba(0,0,0,0.2). The label of the radio button is given the styles of $shadowColor as rgba(0,0,0,0.2), cursor style as pointer to get the hand cursor effect in a hover event, font-weight as bold, text-shadow as 0 0.1em 0.1em $shadowColor, transition as color $radioDur $timing1, and margin-bottom as 1.5em. The radio button and the labels take the color of #2762f3 in the active mode. Media queries have been used to increase the responsiveness of the form. Source: https://codepen.io/jkantner/pen/rNaPadg

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.