Gradient Submit Button
Buttons · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
A pure-CSS button with gradient, glow and pulse effects. Created by mRcOol7 on Uiverse.io.
Created by @mRcOol7 on Uiverse.io · MIT License · View original →
<!-- "Gradient Glowing Button by mRcOol7" by mRcOol7 on Uiverse.io · MIT License · https://uiverse.io/mRcOol7/rotten-yak-63 -->
<button
aria-label="Send Message"
class="button relative overflow-hidden flex items-center px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 border border-transparent rounded-full shadow-lg text-white cursor-pointer transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-50 focus:scale-105 active:scale-95"
>
<div class="ripple"></div>
<svg
class="relative w-12 h-12 mr-2 z-10 transition-transform duration-300 ease-in-out transform hover:rotate-12 shadow-sm transition-colors duration-300 ease-in-out"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 36.000000 75.000000"
height="80pt"
width="80pt"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
>
<g
stroke="none"
fill="#ffffff"
transform="translate(0.000000,75.000000) scale(0.100000,-0.100000)"
>
<path
d="M188 481 c-42 -15 -84 -34 -93 -41 -27 -22 -14 -53 31 -74 30 -14 46 -30 60 -60 23 -50 55 -59 78 -24 24 36 56 137 56 174 0 23 -6 37 -19 44 -25 13 -23 13 -113 -19z m110 -20 c4 -28 -37 -158 -55 -173 -17 -14 -39 4 -48 39 -4 19 0 35 14 54 30 41 26 47 -9 14 -30 -29 -30 -29 -65 -12 -58 28 -47 42 65 81 41 14 80 24 85 22 6 -1 11 -13 13 -25z"
></path>
</g>
</svg>
<svg
class="relative w-8 h-8 mr-2 z-10 transition-transform duration-300 ease-in-out transform hover:rotate-12 shadow-sm transition-colors duration-300 ease-in-out"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 36.000000 75.000000"
height="80pt"
width="80pt"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
>
<g
stroke="none"
fill="#ffffff"
transform="translate(0.000000,75.000000) scale(0.100000,-0.100000)"
>
<path
d="M100 300 l0 -300 30 0 30 0 0 300 0 300 -30 0 -30 0 0 -300z"
></path>
</g>
</svg>
<span
class="relative z-10 font-semibold text-lg transition-all duration-300 ease-in-out"
>Send Message</span
>
</button>
Buttons · @vinodjangid07
Buttons · @MRez321
Buttons · @vinodjangid07
Buttons · @vinodjangid07
Buttons · @0xnihilism
Buttons · @vinodjangid07