mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
71 lines
No EOL
1.6 KiB
HTML
71 lines
No EOL
1.6 KiB
HTML
<button class="button">
|
|
<span class="bg">
|
|
Join Today
|
|
<svg width="1.2em" height="1.2em" viewBox="0 0 48 48">
|
|
<path
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="4"
|
|
d="M42 24H6m24-12l12 12l-12 12"
|
|
></path>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Cobp - Tags: button */
|
|
.button {
|
|
position: relative;
|
|
color: white;
|
|
background-image: linear-gradient(0deg, #8a38cd 0%, #f3b0ff 100%);
|
|
padding: 0.1rem;
|
|
border: none;
|
|
border-radius: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transform: rotate(-15deg);
|
|
cursor: pointer;
|
|
box-shadow:
|
|
-3px 3px 0px 1px rgb(76, 6, 123),
|
|
-4px 4px 4px 1px rgb(76, 6, 123),
|
|
-12px 12px 12px 4px rgb(63, 19, 92, 0.5),
|
|
-18px 18px 16px 8px rgb(63, 19, 92, 0.1);
|
|
gap: 0.4rem;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
transform-origin: left;
|
|
}
|
|
.bg {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: larger;
|
|
padding: 1rem;
|
|
gap: 0.4rem;
|
|
border-radius: 0.65rem;
|
|
background-color: #bd76f6;
|
|
box-shadow:
|
|
inset 3px -4px 8px rgb(119, 36, 185, 0.5),
|
|
inset 0px -2px 2px rgb(119, 36, 185, 0.5);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.button:hover {
|
|
transform: rotate(0deg);
|
|
box-shadow:
|
|
0px 6px 0px rgb(76, 6, 123),
|
|
0px 8px 4px rgb(76, 6, 123);
|
|
}
|
|
.button:active {
|
|
transform: translateY(4px);
|
|
box-shadow: 0px 4px 4px rgb(76, 6, 123);
|
|
}
|
|
.button:active .bg {
|
|
background-color: #9c5fce;
|
|
}
|
|
|
|
</style>
|
|
|