Save Click Effect Checkbox
Toggles · @vinodjangid07
- GPU-friendly
- No JS
Switcher Click Effect Checkbox
A pure-CSS checkbox with pulse, SVG and wave effects. Created by vishnupprajapat on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 1.0 KB gzip
Created by @vishnupprajapat 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
<!-- "Switcher Click Effect Checkbox" by vishnupprajapat on Uiverse.io · MIT License · https://uiverse.io/vishnupprajapat/wicked-catfish-29 -->
<div class="checkbox-wrapper-46">
<input type="checkbox" id="cbx-46" class="inp-cbx" />
<label for="cbx-46" class="cbx"
><span>
<svg viewBox="0 0 12 10" height="10px" width="12px">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg></span
><span>Checkbox</span>
</label>
</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 .checkbox-wrapper-46 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
Checkmark Pulsing Checkbox
Toggles · @catraco
- No JS
- Reduced-motion ready
Pulsing Fading Checkbox
Toggles · @catraco
- GPU-friendly
- No JS
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 by Shoh2008
Toggles · @Shoh2008
- GPU-friendly
- No JS
- Reduced-motion ready