mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
60 lines
1.4 KiB
HTML
60 lines
1.4 KiB
HTML
|
|
<button>
|
|
<span class="text">FIRE !!!</span>
|
|
<span class="bullet"></span>
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by andrew-demchenk0 - Tags: button */
|
|
button {
|
|
padding: 0 15px 0 15px;
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
text-shadow: 1px 1px 2.3px rgba(255,255,255, 0.8);
|
|
position: relative;
|
|
width: 150px;
|
|
height: 40px;
|
|
border-radius: 100% 9% 9% 100% / 0% 100% 100% 0%;
|
|
border: none;
|
|
background-image: linear-gradient(
|
|
180deg, #CDB373, #795E2B,
|
|
#AD8D53, #FFFAB7, #795D2F,
|
|
#614818, #BC9859, #876A35,
|
|
#736141);
|
|
}
|
|
|
|
button::before {
|
|
content: '';
|
|
height: 44px;
|
|
width: 10px;
|
|
position: absolute;
|
|
top: -4.7%;
|
|
left: -5.9%;
|
|
border-radius: 100% 31% 28% 100% / 0% 100% 100% 0%;
|
|
background-image: linear-gradient(
|
|
180deg, #CDB373, #795E2B,
|
|
#AD8D53, #FFFAB7, #795D2F,
|
|
#614818, #BC9859, #876A35,
|
|
#736141);
|
|
}
|
|
|
|
.bullet {
|
|
height: 38px;
|
|
width: 60px;
|
|
position: absolute;
|
|
top: 3%;
|
|
left: 95%;
|
|
border-radius: 10% 100% 100% 10% / 10% 50% 50% 10%;
|
|
background-image: linear-gradient(
|
|
180deg, #512614, #A1623A,
|
|
#BA7447, #EDC38B, #B27449,
|
|
#DDAB77, #EAC4AE, #B67E4E,
|
|
#5B2D17, #44271C);
|
|
z-index: -1;
|
|
}
|
|
|
|
button:active .bullet {
|
|
left: 115%;
|
|
transition: all 0.2s;
|
|
}
|
|
</style>
|