Purple Gradient Button
Buttons · @vinodjangid07
- No JS
- Reduced-motion ready
Challenge Gradient Button
A pure-CSS button with gradient, glow and blur effects. Created by joe-herbert on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 1.4 KB gzip
Created by @joe-herbert 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
<!-- "Challenge Gradient Button" by joe-herbert on Uiverse.io · MIT License · https://uiverse.io/joe-herbert/quick-jellyfish-81 -->
<button class="button">
<div class="button-inner-wrap">
<div class="button-content">
<svg
id="svg1"
version="1.1"
fill="none"
viewBox="0 0 17.191999 17.915001"
height="17.915001"
width="17.191999"
>
<path
id="path1"
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="1.5"
stroke="#000000"
d="M 9.3223611,8.9119975 H 3.5673455 m -0.17238,0.7972 -1.3313244,3.0014005 c -0.8349111,2.493962 0.031033,4.403741 3.26073,2.9505 l 8.8532949,-4.5605 c 1.64001,-0.785228 1.659708,-3.5011752 0,-4.3772505 l -8.8707749,-4.56832 c -2.6423685,-1.18905255 -4.1290723,0.3343707 -3.26268,2.94464 l 1.3527044,3.09163 c 0.0935,0.2817 0.14026,0.4226 0.15871,0.5666 0.01638,0.1279 0.01621,0.2573 -4.9e-4,0.3851 -0.01883,0.144 -0.06594,0.2847 -0.16017,0.5662 z"
></path>
</svg>
<span>Send Message</span>
</div>
</div>
</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
Bounce Animation Gradient Button
Buttons · @Lakshay-art
- GPU-friendly
- No JS
- Reduced-motion ready
Alert Gradient Button
Buttons · @anushkaps
- No JS
- Reduced-motion ready
Gradient Submit Button
Buttons · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
Gradient Faq Button
Buttons · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
Gradient Glowing Button by MRez321
Buttons · @MRez321
- No JS
- Reduced-motion ready