Gradient Submit Button
Buttons · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
A pure-CSS button with gradient and glow effects, animating only GPU-friendly properties. Created by wizard503 on Uiverse.io.
Created by @wizard503 on Uiverse.io · MIT License · View original →
<!-- "Gradient Glowing Button by wizard503" by wizard503 on Uiverse.io · MIT License · https://uiverse.io/wizard503/breezy-tiger-28 -->
<div class="btn-container">
<button type="submit" name="space-button" id="space-btn">
<span>Look Up</span>
<span class="moon"><span class="moon1"></span></span>
<span class="planet"></span>
<div class="star" style="left: 119.273px;
top: 18.0747px;
animation-delay: 3.37051s;
transform: scale(1.1);"></div>
<div class="star" style="left: 22.2022px;
top: 10.69534px;
animation-delay: 4.9s;
transform: scale(2.22);"></div>
<div class="star" style="left: 14.754px;
top: 25.2924px;
animation-delay: 0.05s;
transform: scale(0.1);"></div>
<div class="star" style="left: 95.948px;
top: 54.8942px;
animation-delay: 3.1s;
transform: scale(1.87);"></div>
<div class="star" style="left: 184.622px;
top: 20.0923px;
animation-delay: 2.8s;
transform: scale(1.77);"></div>
<div class="star" style="left: 142.1px;
top: 22.3542px;
animation-delay: 2.73988s;
transform: scale(1.62715);"></div>
<div class="star" style="left: 145.079px;
top: 6.97553px;
animation-delay: 0.0408754s;
transform: scale(0.468075);"></div>
<div class="star" style="left: 42.2308px;
top: 9.78383px;
animation-delay: 4.58407s;
transform: scale(0.0422065);"></div>
<div class="star" style="left: 91.2734px;
top: 14.0408px;
animation-delay: 2.05927s;
transform: scale(0.11997);"></div>
<div class="star" style="left: 35.6985px;
top: 52.6403px;
animation-delay: 3.07343s;
transform: scale(0.672992);"></div>
<div class="star" style="left: 76.4191px;
top: 48.453px;
animation-delay: 2.35679s;
transform: scale(2.001);"></div>
<div class="star" style="left: 154.027px;
top: 45.9848px;
animation-delay: 3.723s;
transform: scale(1.4118);"></div>
<div class="star" style="left: 110.241px;
top: 20.2684px;
animation-delay: 2.94906s;
transform: scale(1.2193);"></div>
<div class="star" style="left: 12.602px;
top: 19.8836px;
animation-delay: 4.072s;
transform: scale(1.49026);"></div>
<div class="star" style="left: 30.0911px;
top: 37.9746px;
animation-delay: 1.02002s;
transform: scale(1.41008);"></div>
<div class="star" style="left: 62.3096px;
top: 9.64604px;
animation-delay: 3.9445s;
transform: scale(0.231214);"></div>
<div class="star" style="left: 44.7189px;
top: 32.4307px;
animation-delay: 4.78921s;
transform: scale(0.359408);"></div>
<div class="star" style="left: 191.866px;
top: 27.151px;
animation-delay: 1.34451s;
transform: scale(1.13484);"></div>
<div class="star" style="left: 47.6744px;
top: 3.00604px;
animation-delay: 1.04567s;
transform: scale(0.682023);"></div>
<div class="star" style="left: 98.6225px;
top: 49.6115px;
animation-delay: 2.41384s;
transform: scale(1.96254);"></div>
<div class="star" style="left: 57.4785px;
top: 29.6588px;
animation-delay: 3.3569s;
transform: scale(1.53118);"></div>
<div class="star" style="left: 13.2213px;
top: 24.538px;
animation-delay: 1.69582s;
transform: scale(1.6236);"></div>
<div class="star" style="left: 56.9067px;
top: 51.9904px;
animation-delay: 4.74375s;
transform: scale(0.749788);"></div>
<div class="star" style="left: 139.8361px;
top: 45.3876px;
animation-delay: 1.28648s;
transform: scale(0.566118);"></div>
<div class="star" style="right: 40.9067px;
top: 21.9904px;
animation-delay: 4.74375s;
transform: scale(0.749788);"></div>
<div class="star" style="right: 30.9067px;
top: 26.9904px;
animation-delay: 4.74375s;
transform: scale(0.749788);"></div>
<div class="star" style="right: 30.9067px;
top: 16.9904px;
animation-delay: 4.74375s;
transform: scale(0.749788);"></div>
<div class="star" style="right: 20.9067px;
top: 10.904px;
animation-delay: 4.74375s;
transform: scale(0.749788);"></div>
<div class="star" style="right: 40.9067px;
top: 8.9904px;
animation-delay: 4.74375s;
transform: scale(0.749788);"></div>
<div class="star" style="left: 80.9067px;
top: 8.9904px;
animation-delay: 4.74375s;
transform: scale(0.749788);"></div>
<div class="star" style="left: 100.9067px;
top: 6.9904px;
animation-delay: 4.74375s;
transform: scale(0.749788);"></div>
<div class="star" style="left: 130.9067px;
top: 8.9904px;
animation-delay: 4.74375s;
transform: scale(0.749788);"></div>
<div class="star" style="right: 80.9067px;
top: 5.9904px;
animation-delay: 4.74375s;
transform: scale(1.9999998);"></div>
<div class="star" style="right: 45.9067px;
top: 35.9904px;
animation-delay: 4.74375s;
transform: scale(1.999998);"></div>
<div class="star" style="right: 85.9067px;
top: 44.9904px;
animation-delay: 4.74375s;
transform: scale(1.99998998);"></div>
</button>
</div>
Buttons · @vinodjangid07
Buttons · @vinodjangid07
Buttons · @vinodjangid07
Buttons · @mrhyddenn
Buttons · @vinodjangid07
Buttons · @BurgiSimon