Pulsing Fading Checkbox
Toggles · @catraco
- GPU-friendly
- No JS
Checkmark Pulsing Checkbox
A pure-CSS checkbox with pulse, fade and SVG effects. Created by catraco on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 997 B gzip
Created by @catraco on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Customisable properties (--accent, --speed) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Checkmark Pulsing Checkbox" by catraco on Uiverse.io · MIT License · https://uiverse.io/catraco/hungry-squid-59 -->
<label class="container">
<input type="checkbox" checked="checked">
<div class="checkmark"></div>
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" class="celebrate">
<polygon points="0,0 10,10"></polygon>
<polygon points="0,25 10,25"></polygon>
<polygon points="0,50 10,40"></polygon>
<polygon points="50,0 40,10"></polygon>
<polygon points="50,25 40,25"></polygon>
<polygon points="50,50 40,40"></polygon>
</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.
- Adjust the custom properties (--accent, --speed) on .container 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
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