Pulsing Fading Checkbox
Toggles · @catraco
- GPU-friendly
- No JS
Star Pulsing Checkbox
A pure-CSS checkbox with pulse and SVG effects, animating only GPU-friendly properties. Created by ahmed150up on Uiverse.io.
- GPU-friendly
- No JS
- 452 B gzip
Created by @ahmed150up on Uiverse.io · MIT License · View original →
Code
<!-- "Star Pulsing Checkbox" by ahmed150up on Uiverse.io · MIT License · https://uiverse.io/ahmed150up/strange-fox-68 -->
<input type="checkbox" id="star">
<label for="star">
<svg viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
</svg>
</label>
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.
Related animations
Pulsing Fading Checkbox by Shoh2008
Toggles · @Shoh2008
- GPU-friendly
- No JS
- Reduced-motion ready
Save Click Effect Checkbox
Toggles · @vinodjangid07
- GPU-friendly
- No JS
Switcher Click Effect Checkbox
Toggles · @vishnupprajapat
- No JS
- Reduced-motion ready
Star Rate Radio
Toggles · @SelfMadeSystem
- No JS
- Reduced-motion ready
Like Heart Checkbox
Toggles · @catraco
- No JS
- Reduced-motion ready