Pulsing Fading Switch
Toggles · @Type-Delta
- GPU-friendly
- No JS
- Reduced-motion ready
Starrating Pulsing Switch
A pure-CSS switch with pulse and bounce effects. Created by ForzDz on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 662 B gzip
Created by @ForzDz on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Customisable properties (--accent, --color-2, --speed) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Starrating Pulsing Switch" by ForzDz on Uiverse.io · MIT License · https://uiverse.io/ForzDz/kind-mule-56 -->
<div class="rating">
<input type="radio" id="star5" name="rating" value="5">
<label for="star5"></label>
<input type="radio" id="star4" name="rating" value="4">
<label for="star4"></label>
<input type="radio" id="star3" name="rating" value="3">
<label for="star3"></label>
<input type="radio" id="star2" name="rating" value="2">
<label for="star2"></label>
<input type="radio" id="star1" name="rating" value="1">
<label for="star1"></label>
</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, --speed) on .rating 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
Like Heart Switch
Toggles · @TroyRandall
- GPU-friendly
- No JS
- Reduced-motion ready
Pulsing Switch by Subaashbala
Toggles · @Subaashbala
- GPU-friendly
- No JS
- Reduced-motion ready
Pulsing Switch by Subaashbala 2
Toggles · @Subaashbala
- GPU-friendly
- No JS
- Reduced-motion ready
Plant Seed Switch
Toggles · @shadowfax29
- No JS
- Reduced-motion ready
Action Download Switch
Toggles · @Na3ar-17
- No JS
- Reduced-motion ready