Like Heart Checkbox
Toggles · @catraco
- No JS
- Reduced-motion ready
Like Heart Checkbox by KSAplay
A pure-CSS checkbox with pulse and SVG effects. Created by KSAplay on Uiverse.io.
- No JS
- Customisable
- 856 B gzip
Created by @KSAplay 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.
- Element is not visible with reduced motion enabled; reduced-motion badge withheld.
Code
<!-- "Like Heart Checkbox by KSAplay" by KSAplay on Uiverse.io · MIT License · https://uiverse.io/KSAplay/smart-bobcat-50 -->
<label class="container">
<input checked="checked" type="checkbox">
<div class="checkmark">
<svg viewBox="0 0 256 256">
<rect fill="none" height="256" width="256"></rect>
<path d="M224.6,51.9a59.5,59.5,0,0,0-43-19.9,60.5,60.5,0,0,0-44,17.6L128,59.1l-7.5-7.4C97.2,28.3,59.2,26.3,35.9,47.4a59.9,59.9,0,0,0-2.3,87l83.1,83.1a15.9,15.9,0,0,0,22.6,0l81-81C243.7,113.2,245.6,75.2,224.6,51.9Z" stroke-width="20px" stroke="#FFF" fill="none"></path></svg>
</div>
</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.
Related animations
Like Heart Switch
Toggles · @TroyRandall
- GPU-friendly
- No JS
- Reduced-motion ready
Active Like Checkbox
Toggles · @SalladShooter
- GPU-friendly
- No JS
- Reduced-motion ready
Pulsing Fading Checkbox
Toggles · @catraco
- GPU-friendly
- No JS
Pulsing Fading Checkbox by Shoh2008
Toggles · @Shoh2008
- GPU-friendly
- No JS
- Reduced-motion ready
Save Click Effect Checkbox
Toggles · @vinodjangid07
- GPU-friendly
- No JS