Gradient Submit Button
Buttons · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
Gradient Glowing Button by vinodjangid07
A pure-CSS button with gradient, glow and pulse effects. Created by vinodjangid07 on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 1.1 KB gzip
Created by @vinodjangid07 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 Glowing Button by vinodjangid07" by vinodjangid07 on Uiverse.io · MIT License · https://uiverse.io/vinodjangid07/ordinary-swan-71 -->
<button class="button">
<svg viewBox="0 0 448 512" class="bell"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path></svg>
Notifications
</button>
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 .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 Faq Button
Buttons · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
Purple Gradient Button
Buttons · @vinodjangid07
- No JS
- Reduced-motion ready
Gradient Sign Up Button
Buttons · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
Alert Gradient Button
Buttons · @anushkaps
- No JS
- Reduced-motion ready
Bounce Animation Gradient Button
Buttons · @Lakshay-art
- GPU-friendly
- No JS
- Reduced-motion ready