Pulsing Fading Switch
Toggles · @Type-Delta
- GPU-friendly
- No JS
- Reduced-motion ready
Action Download Switch
A pure-CSS switch with glow, pulse and fade effects. Created by Na3ar-17 on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 1.4 KB gzip
Created by @Na3ar-17 on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Customisable properties (--accent, --color-2, --color-3) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Action Download Switch" by Na3ar-17 on Uiverse.io · MIT License · https://uiverse.io/Na3ar-17/evil-dragon-24 -->
<div class="container">
<label class="label">
<input class="input" type="checkbox" />
<span class="circle"
><svg
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
class="icon"
>
<path
d="M12 19V5m0 14-4-4m4 4 4-4"
stroke-width="1.5"
stroke-linejoin="round"
stroke-linecap="round"
stroke="currentColor"
></path>
</svg>
<div class="square"></div>
</span>
<p class="title">Download</p>
<p class="title">Open</p>
</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) 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
Like Heart Switch
Toggles · @TroyRandall
- GPU-friendly
- No JS
- Reduced-motion ready
Plant Seed Switch
Toggles · @shadowfax29
- 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