Alert Gradient Button
Buttons · Community
- No JS
- Reduced-motion ready
Gradient Pulsing Button 2
A pure-CSS button with gradient, pulse and SVG effects, animating only GPU-friendly properties.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 1.3 KB gzip
Community animation · MIT License
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
<!-- © 2023 Uiverse.io · MIT License -->
<div class="share-wrapper">
<input id="share-toggle" type="checkbox" class="check" />
<label for="share-toggle" class="container">
<svg
class="icon inactive"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M18 16.08C17.24 16.08 16.56 16.38 16.05 16.87L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.95 7.13C16.46 7.62 17.24 7.92 18 7.92C19.66 7.92 21 6.58 21 4.92C21 3.26 19.66 1.92 18 1.92C16.34 1.92 15 3.26 15 4.92C15 5.16 15.04 5.39 15.09 5.62L8.05 9.79C7.54 9.3 6.76 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.76 15 7.54 14.7 8.05 14.21L15.18 18.38C15.13 18.61 15.09 18.84 15.09 19.08C15.09 20.74 16.43 22.08 18.09 22.08C19.75 22.08 21.09 20.74 21.09 19.08C21.09 17.42 19.75 16.08 18 16.08Z"
></path>
</svg>
<svg
class="icon active"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M18 16.08C17.24 16.08 16.56 16.38 16.05 16.87L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.95 7.13C16.46 7.62 17.24 7.92 18 7.92C19.66 7.92 21 6.58 21 4.92C21 3.26 19.66 1.92 18 1.92C16.34 1.92 15 3.26 15 4.92C15 5.16 15.04 5.39 15.09 5.62L8.05 9.79C7.54 9.3 6.76 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.76 15 7.54 14.7 8.05 14.21L15.18 18.38C15.13 18.61 15.09 18.84 15.09 19.08C15.09 20.74 16.43 22.08 18.09 22.08C19.75 22.08 21.09 20.74 21.09 19.08C21.09 17.42 19.75 16.08 18 16.08Z"
></path>
</svg>
<div class="checkmark"></div>
<span class="share-text">Share</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 .share-wrapper 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
Gradient Submit Button
Buttons · Community
- GPU-friendly
- No JS
- Reduced-motion ready
Gradient Faq Button
Buttons · Community
- GPU-friendly
- No JS
- Reduced-motion ready
Purple Gradient Button
Buttons · Community
- No JS
- Reduced-motion ready
Gradient Glowing Button 5
Buttons · Community
- No JS
- Reduced-motion ready
Bounce Animation Gradient Button
Buttons · Community
- GPU-friendly
- No JS
- Reduced-motion ready