Alert Gradient Button
Buttons · @anushkaps
- No JS
- Reduced-motion ready
Gradient Pulsing Button by aryansagar2405
A pure-CSS button with gradient, pulse and SVG effects, animating only GPU-friendly properties. Created by aryansagar2405 on Uiverse.io.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 1.3 KB gzip
Created by @aryansagar2405 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
<!-- "Gradient Pulsing Button by aryansagar2405" by aryansagar2405 on Uiverse.io · MIT License · https://uiverse.io/aryansagar2405/bitter-baboon-4 -->
<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 · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
Gradient Faq Button
Buttons · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
Purple Gradient Button
Buttons · @vinodjangid07
- No JS
- Reduced-motion ready
Gradient Glowing Button by vinodjangid07
Buttons · @vinodjangid07
- No JS
- Reduced-motion ready
Bounce Animation Gradient Button
Buttons · @Lakshay-art
- GPU-friendly
- No JS
- Reduced-motion ready