Purple Gradient Button
Buttons · Community
- No JS
- Reduced-motion ready
3D Button
A pure-CSS button with 3D and SVG effects, animating only GPU-friendly properties.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 1.6 KB gzip
Community animation · MIT License
What PasteMotion changed
- Customisable properties (--accent, --color-2, --speed) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- © 2023 Uiverse.io · MIT License -->
<div class="printer">
<div class="paper">
<svg viewBox="0 0 8 8" class="svg">
<path fill="#0077FF" d="M6.28951 1.3867C6.91292 0.809799 7.00842 0 7.00842 0C7.00842 0 6.45246 0.602112 5.54326 0.602112C4.82505 0.602112 4.27655 0.596787 4.07703 0.595012L3.99644 0.594302C1.94904 0.594302 0.290039 2.25224 0.290039 4.29715C0.290039 6.34206 1.94975 8 3.99644 8C6.04312 8 7.70284 6.34206 7.70284 4.29715C7.70347 3.73662 7.57647 3.18331 7.33147 2.67916C7.08647 2.17502 6.7299 1.73327 6.2888 1.38741L6.28951 1.3867ZM3.99679 6.532C2.76133 6.532 1.75875 5.53084 1.75875 4.29609C1.75875 3.06133 2.76097 2.06018 3.99679 2.06018C4.06423 2.06014 4.13163 2.06311 4.1988 2.06905L4.2414 2.07367C4.25028 2.07438 4.26057 2.0758 4.27406 2.07651C4.81533 2.1436 5.31342 2.40616 5.67465 2.81479C6.03589 3.22342 6.23536 3.74997 6.23554 4.29538C6.23554 5.53084 5.23439 6.532 3.9975 6.532H3.99679Z"></path>
<path fill="#0055BB" d="M6.756 1.82386C6.19293 2.09 5.58359 2.24445 4.96173 2.27864C4.74513 2.17453 4.51296 2.10653 4.27441 2.07734C4.4718 2.09225 5.16906 2.07947 5.90892 1.66374C6.04642 1.58672 6.1743 1.49364 6.28986 1.38647C6.45751 1.51849 6.61346 1.6647 6.756 1.8235V1.82386Z"></path>
</svg>
</div>
<div class="dot"></div>
<div class="output">
<div class="paper-out"></div>
</div>
</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, --speed) on .printer 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
Arrow Gradient Button
Buttons · Community
- GPU-friendly
- No JS
- Reduced-motion ready
Next Click Effect Button
Buttons · Community
- GPU-friendly
- No JS
- Reduced-motion ready
Gradient Submit Button
Buttons · Community
- GPU-friendly
- No JS
- Reduced-motion ready
Gradient Faq Button
Buttons · Community
- GPU-friendly
- No JS
- Reduced-motion ready
Download Glowing Button
Buttons · Community
- GPU-friendly
- No JS
- Reduced-motion ready