mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
47 lines
No EOL
1.2 KiB
HTML
47 lines
No EOL
1.2 KiB
HTML
<button>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
|
<path
|
|
d="M0 256L28.5 28c2-16 15.6-28 31.8-28H228.9c15 0 27.1 12.1 27.1 27.1c0 3.2-.6 6.5-1.7 9.5L208 160H347.3c20.2 0 36.7 16.4 36.7 36.7c0 7.4-2.2 14.6-6.4 20.7l-192.2 281c-5.9 8.6-15.6 13.7-25.9 13.7h-2.9c-15.7 0-28.5-12.8-28.5-28.5c0-2.3 .3-4.6 .9-6.9L176 288H32c-17.7 0-32-14.3-32-32z"
|
|
></path>
|
|
</svg>
|
|
Join Now
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Bodyhc - Tags: button, buttons, simple button, hover button, #button, tailwindbutton, 3d button, button hover effect */
|
|
button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
border-radius: 20px;
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
#fa7fe6 0%,
|
|
#ff8e61 50%,
|
|
#fa7fe6 100%
|
|
);
|
|
border: 2px solid #9d098431;
|
|
color: #000000;
|
|
font-weight: 600;
|
|
padding: 20px 40px; /* increase padding to make button bigger */
|
|
cursor: pointer;
|
|
}
|
|
button svg {
|
|
font-size: 24px; /* increase font size to make lightning bolt bigger */
|
|
margin-right: 10px;
|
|
width: 30px;
|
|
height: 20px;
|
|
color: black;
|
|
}
|
|
button:hover {
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
#ff8e61 0%,
|
|
#fa7fe6 50%,
|
|
#fe9b74 100%
|
|
);
|
|
}
|
|
|
|
</style>
|
|
|