mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
58 lines
No EOL
1 KiB
HTML
58 lines
No EOL
1 KiB
HTML
<button class="button">Sign Up</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by zanina-yassine - Tags: blue, minimalist, gradient, button, hover, rounded, dark, glow */
|
|
.button {
|
|
min-width: 120px;
|
|
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
padding: 12px 17px;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
background: radial-gradient(
|
|
ellipse at bottom,
|
|
rgba(71, 81, 92, 1) 0%,
|
|
rgba(11, 21, 30, 1) 45%
|
|
);
|
|
|
|
color: rgb(255, 255, 255, 0.66);
|
|
|
|
transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
|
|
}
|
|
|
|
.button::before {
|
|
content: "";
|
|
width: 70%;
|
|
height: 1px;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 15%;
|
|
|
|
background: rgb(255, 255, 255);
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(255, 255, 255, 0) 0%,
|
|
rgba(255, 255, 255, 1) 50%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
opacity: 0.2;
|
|
|
|
transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
|
|
}
|
|
|
|
.button:hover {
|
|
color: rgb(255, 255, 255, 1);
|
|
transform: scale(1.1) translateY(-3px);
|
|
}
|
|
|
|
.button:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
</style>
|
|
|