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. 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.