Alert Gradient Button
Buttons · @anushkaps
- No JS
- Reduced-motion ready
Gradient Pulsing Button
A pure-CSS button with gradient, pulse and SVG effects, animating only GPU-friendly properties. Created by Muhammad-Usman-911 on Uiverse.io.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 1.2 KB gzip
Created by @Muhammad-Usman-911 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 Muhammad-Usman-911 on Uiverse.io · MIT License · https://uiverse.io/Muhammad-Usman-911/heavy-moose-44 -->
<a class="codepen-button"
><span class="span"
><p class="p">Shop</p>
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 576 512"
fill="#000"
class="cart"
>
<path
d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"
></path></svg></span
></a>
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 .codepen-button 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