https://github.com/withaarzoo/jumping-radio-button

This is a simple HTML and CSS code snippet that demonstrates a jumping radio button effect. When a radio button is selected, a colored dot appears next to the corresponding label and moves upwards, creating a jumping animation effect.
https://github.com/withaarzoo/jumping-radio-button

css html radio-buttons

Last synced: about 12 hours ago
JSON representation

This is a simple HTML and CSS code snippet that demonstrates a jumping radio button effect. When a radio button is selected, a colored dot appears next to the corresponding label and moves upwards, creating a jumping animation effect.

• Host: GitHub
• URL: https://github.com/withaarzoo/jumping-radio-button
• Owner: withaarzoo
• Created: 2023-07-14T08:13:45.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-14T08:20:59.000Z (over 1 year ago)
• Last Synced: 2023-12-30T18:51:53.281Z (11 months ago)
• Topics: css, html, radio-buttons
• Language: CSS
• Homepage:
• Size: 2.93 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Jumping Radio Button

This is a simple HTML and CSS code snippet that demonstrates a jumping radio button effect. When a radio button is selected, a colored dot appears next to the corresponding label and moves upwards, creating a jumping animation effect.

## Usage

To use this code snippet, follow the steps below:

1. Copy the HTML code and paste it into your HTML file.

2. Save the CSS code in a separate file named `style.css` or include it within a `` tag in your HTML file.

3. Customize the code as needed, such as changing the radio button labels and colors.

4. Open the HTML file in a web browser to see the jumping radio button effect.

   

Please note that this code is provided as a starting point and can be further modified and enhanced to suit your specific requirements.

## Dependencies

This code snippet does not have any external dependencies. It only requires HTML and CSS to work properly.

## Compatibility

The code snippet is compatible with modern web browsers that support CSS Grid and CSS Transitions. It may not work as expected in older browsers that lack support for these features.

## License

This code is released under the MIT License. Feel free to use and modify it according to your needs.

## Author

This code snippet was created by [Aarzoo](https://twitter.com/Aarzoo75) and can be found on Twitter. Feel free to reach out with any questions or suggestions.

## Preview

<img width="957" alt="Screenshot 2023-07-14 134249" src="https://github.com/Aarzoo75/Jumping-Radio-Button/assets/59678435/79cfbae2-3ca1-4f15-92d1-26ad44fa5e5b">