Purple Gradient Button
Buttons · @vinodjangid07
- No JS
- Reduced-motion ready
Alert Gradient Button
A pure-CSS button with gradient, pulse and SVG effects. Created by anushkaps on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 1.3 KB gzip
Created by @anushkaps 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
<!-- "Alert Gradient Button" by anushkaps on Uiverse.io · MIT License · https://uiverse.io/anushkaps/nasty-mouse-56 -->
<button class="button">
<div class="in">
<div class="image">
<svg
fill="#000000"
width="25px"
height="25px"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
transform="rotate(-45)"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<path
d="M20.34,9.32l-14-7a3,3,0,0,0-4.08,3.9l2.4,5.37h0a1.06,1.06,0,0,1,0,.82l-2.4,5.37A3,3,0,0,0,5,22a3.14,3.14,0,0,0,1.35-.32l14-7a3,3,0,0,0,0-5.36Zm-.89,3.57-14,7a1,1,0,0,1-1.35-1.3l2.39-5.37A2,2,0,0,0,6.57,13h6.89a1,1,0,0,0,0-2H6.57a2,2,0,0,0-.08-.22L4.1,5.41a1,1,0,0,1,1.35-1.3l14,7a1,1,0,0,1,0,1.78Z"
></path>
</g>
</svg>
</div>
<div class="text">Send Message</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
Gradient Submit Button
Buttons · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
Gradient Faq Button
Buttons · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
Challenge Gradient Button
Buttons · @joe-herbert
- No JS
- Reduced-motion ready
Message Glowing Button
Buttons · @Bastiennnn
- No JS
- Reduced-motion ready