Pulsing Fading Checkbox
Toggles · @catraco
- GPU-friendly
- No JS
Space Futuristic Switch
A pure-CSS switch with fade and SVG effects. Created by Tsiangana on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 1.8 KB gzip
Created by @Tsiangana 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
<!-- "Space Futuristic Switch" by Tsiangana on Uiverse.io · MIT License · https://uiverse.io/Tsiangana/massive-snail-12 -->
<label class="switch">
<input type="checkbox" />
<span class="slider">
<div class="fug">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
fill="currentColor"
class="nav bi bi-rocket-takeoff-fill"
viewBox="0 0 16 16"
>
<path
d="M12.17 9.53c2.307-2.592 3.278-4.684 3.641-6.218.21-.887.214-1.58.16-2.065a3.578 3.578 0 0 0-.108-.563 2.22 2.22 0 0 0-.078-.23V.453c-.073-.164-.168-.234-.352-.295a2.35 2.35 0 0 0-.16-.045 3.797 3.797 0 0 0-.57-.093c-.49-.044-1.19-.03-2.08.188-1.536.374-3.618 1.343-6.161 3.604l-2.4.238h-.006a2.552 2.552 0 0 0-1.524.734L.15 7.17a.512.512 0 0 0 .433.868l1.896-.271c.28-.04.592.013.955.132.232.076.437.16.655.248l.203.083c.196.816.66 1.58 1.275 2.195.613.614 1.376 1.08 2.191 1.277l.082.202c.089.218.173.424.249.657.118.363.172.676.132.956l-.271 1.9a.512.512 0 0 0 .867.433l2.382-2.386c.41-.41.668-.949.732-1.526l.24-2.408Zm.11-3.699c-.797.8-1.93.961-2.528.362-.598-.6-.436-1.733.361-2.532.798-.799 1.93-.96 2.528-.361.599.599.437 1.732-.36 2.531Z"
></path>
<path
d="M5.205 10.787a7.632 7.632 0 0 0 1.804 1.352c-1.118 1.007-4.929 2.028-5.054 1.903-.126-.127.737-4.189 1.839-5.18.346.69.837 1.35 1.411 1.925Z"
></path>
</svg>
</div>
<div class="stars">
<svg
xmlns="http://www.w3.org/2000/svg"
width="4"
height="4"
fill="#fff"
class="star bi bi-star-fill"
viewBox="0 0 16 16"
>
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="4"
height="4"
fill="#fff"
class="star bi bi-star-fill"
viewBox="0 0 16 16"
>
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="4"
height="4"
fill="#fff"
class="star bi bi-star-fill"
viewBox="0 0 16 16"
>
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="4"
height="4"
fill="#fff"
class="star bi bi-star-fill"
viewBox="0 0 16 16"
>
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
></path>
</svg>
</div>
</span>
</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, --color-2, --color-3) on .switch 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 Switch
Toggles · @Type-Delta
- GPU-friendly
- No JS
- Reduced-motion ready
Like Heart Switch
Toggles · @TroyRandall
- GPU-friendly
- No JS
- Reduced-motion ready
Star Rate Radio
Toggles · @SelfMadeSystem
- No JS
- Reduced-motion ready
Plant Seed Switch
Toggles · @shadowfax29
- No JS
- Reduced-motion ready
Checkmark Pulsing Checkbox
Toggles · @catraco
- No JS
- Reduced-motion ready