Neumorphism Skeuomorphism Radio
Toggles · Community
- GPU-friendly
- No JS
- Reduced-motion ready
Submit Switcher Radio
A pure-CSS radio with glow effects, animating only GPU-friendly properties.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 1000 B gzip
Community animation · MIT License
What PasteMotion changed
- Customisable properties (--accent, --color-2, --color-3) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- © 2023 Uiverse.io · MIT License -->
<div class="radiogroup">
<div class="wrapper">
<input value="a" id="a" name="app" type="radio" class="state" />
<label for="a" class="label">
<div class="indicator"></div>
<span class="text">a) close</span>
</label>
</div>
<div class="wrapper">
<input value="b" id="b" name="app" type="radio" class="state" />
<label for="b" class="label">
<div class="indicator"></div>
<span class="text">b) remove</span>
</label>
</div>
<div class="wrapper">
<input value="c" id="c" name="app" type="radio" class="state" />
<label for="c" class="label">
<div class="indicator"></div>
<span class="text">c) delete</span>
</label>
</div>
<div class="wrapper">
<input value="d" id="d" name="app" type="radio" class="state" />
<label for="d" class="label">
<div class="indicator"></div>
<span class="text">d) all of the above</span>
</label>
</div>
</div>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. PasteMotion has already scoped any global rules to the element.
- Adjust the custom properties (--accent, --color-2, --color-3) on .radiogroup to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Cyberpunk Neon Radio
Toggles · Community
- No JS
- Reduced-motion ready
Skeuomorphism Realistic Radio
Toggles · Community
- No JS
- Reduced-motion ready
Gradient Glowing Radio
Toggles · Community
- No JS
- Reduced-motion ready
Gradient Glowing Radio 2
Toggles · Community
- No JS
- Reduced-motion ready
Spinning Pulsing Radio
Toggles · Community
- GPU-friendly
- No JS
- Reduced-motion ready