Pulsing Fading Checkbox
Toggles · Community
- GPU-friendly
- No JS
Star Pulsing Checkbox
A pure-CSS checkbox with pulse and SVG effects, animating only GPU-friendly properties.
- GPU-friendly
- No JS
- 452 B gzip
Community animation · MIT License
Code
<!-- © 2023 Uiverse.io · MIT License -->
<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 2
Toggles · Community
- GPU-friendly
- No JS
- Reduced-motion ready
Save Click Effect Checkbox
Toggles · Community
- GPU-friendly
- No JS
Switcher Click Effect Checkbox
Toggles · Community
- No JS
- Reduced-motion ready
Star Rate Radio
Toggles · Community
- No JS
- Reduced-motion ready
Like Heart Checkbox
Toggles · Community
- No JS
- Reduced-motion ready