Active Like Checkbox
Toggles · @SalladShooter
- GPU-friendly
- No JS
- Reduced-motion ready
Like Heart Switch
A pure-CSS switch with pulse, fade and SVG effects, animating only GPU-friendly properties. Created by TroyRandall on Uiverse.io.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 1.1 KB gzip
Created by @TroyRandall on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Customisable properties (--accent, --color-2, --color-3, --speed) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Like Heart Switch" by TroyRandall on Uiverse.io · MIT License · https://uiverse.io/TroyRandall/curvy-eagle-61 -->
<div class="comment-react">
<button>
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M19.4626 3.99415C16.7809 2.34923 14.4404 3.01211 13.0344 4.06801C12.4578 4.50096 12.1696 4.71743 12 4.71743C11.8304 4.71743 11.5422 4.50096 10.9656 4.06801C9.55962 3.01211 7.21909 2.34923 4.53744 3.99415C1.01807 6.15294 0.221721 13.2749 8.33953 19.2834C9.88572 20.4278 10.6588 21 12 21C13.3412 21 14.1143 20.4278 15.6605 19.2834C23.7783 13.2749 22.9819 6.15294 19.4626 3.99415Z"
stroke="#707277"
stroke-width="2"
stroke-linecap="round"
fill="#707277"
></path>
</svg>
</button>
<span>14</span>
</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, --color-3, --speed) on .comment-react 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 Checkbox
Toggles · @catraco
- No JS
- Reduced-motion ready
Pulsing Fading Checkbox
Toggles · @catraco
- GPU-friendly
- No JS
Pulsing Fading Switch
Toggles · @Type-Delta
- GPU-friendly
- No JS
- Reduced-motion ready
Plant Seed Switch
Toggles · @shadowfax29
- No JS
- Reduced-motion ready
Neumorphism Skeuomorphism Switch
Toggles · @Yaya12085
- No JS
- Reduced-motion ready