mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
94 lines
No EOL
2.2 KiB
HTML
94 lines
No EOL
2.2 KiB
HTML
<button class="join-button">
|
|
Join Today
|
|
<span class="arrow">
|
|
<svg
|
|
fill="#000000"
|
|
xml:space="preserve"
|
|
viewBox="0 0 32.00 32.00"
|
|
id="Layer_1"
|
|
version="1.1"
|
|
>
|
|
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
|
|
<g
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
id="SVGRepo_tracerCarrier"
|
|
></g>
|
|
<g id="SVGRepo_iconCarrier">
|
|
<line
|
|
y2="16"
|
|
x2="4"
|
|
y1="16"
|
|
x1="26"
|
|
stroke-miterlimit="10"
|
|
stroke-width="2.848"
|
|
stroke="#f3bff3"
|
|
fill="none"
|
|
></line>
|
|
<polyline
|
|
points="18,7.5 26.5,16 18,24.5"
|
|
stroke-miterlimit="10"
|
|
stroke-width="2.848"
|
|
stroke="#f3bff3"
|
|
fill="none"
|
|
></polyline>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by abhayexe - Tags: button */
|
|
.join-button {
|
|
background: rgb(226, 136, 243);
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(226, 136, 243, 1) 5%,
|
|
rgba(143, 76, 215, 1) 71%,
|
|
rgb(136, 37, 193) 93%,
|
|
rgb(98, 29, 176) 100%
|
|
);
|
|
border-top: 3px solid rgb(248, 205, 247);
|
|
border-bottom: 3px solid rgb(179, 64, 250);
|
|
border-left: 3px solid rgb(240, 162, 250);
|
|
border-right: 3px solid rgb(240, 162, 250);
|
|
color: rgba(244, 221, 249, 0.888);
|
|
text-shadow: 0px 1.5px #5000753d;
|
|
height: 70px;
|
|
border-radius: 20px;
|
|
padding: 15px 30px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.7s ease;
|
|
box-shadow:
|
|
-25px 25px 15px rgba(55, 1, 181, 0.272),
|
|
-5px 5px 2px rgb(91, 1, 126),
|
|
-15px 15px 10px rgba(116, 1, 126, 0.555);
|
|
}
|
|
.join-button svg {
|
|
height: 30px;
|
|
margin-bottom: -9px;
|
|
margin-left: 5px;
|
|
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.256));
|
|
}
|
|
.join-button:hover {
|
|
transform: translateY(5px);
|
|
box-shadow: -5px 5px 5px rgb(66, 1, 94);
|
|
background: rgb(91, 37, 193);
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(91, 37, 193, 1) 5%,
|
|
rgba(143, 76, 215, 1) 57%,
|
|
rgba(226, 136, 243, 1) 100%
|
|
);
|
|
}
|
|
.join-button:active {
|
|
transition: transform 50ms ease-out;
|
|
box-shadow: -3px 3px 0px rgb(21, 0, 30);
|
|
transform: translateY(19px);
|
|
}
|
|
|
|
</style>
|
|
|