mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
66 lines
No EOL
1.5 KiB
HTML
66 lines
No EOL
1.5 KiB
HTML
<button class="button">
|
|
<svg viewBox="2.5 -15 13 13" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
fill="none"
|
|
stroke-width="1"
|
|
stroke="#000000"
|
|
d="M 8 -7 C 9 -1 11.368 -2.531 12 -4 C 13 -6.6667 14 -9.3333 14.763 -11.565 C 15.381 -13.129 13.796 -14.529 12 -14 C 9.3333 -13 6.6667 -12 4.144 -10.825 C 1.613 -9.096 5.77 -7.45 7.828 -7.1 C 8.5757 -7.9023 9.3233 -8.7047 10.071 -9.507 C 9.385 -8.6703 8.699 -7.8337 8.013 -6.997"
|
|
></path>
|
|
</svg>
|
|
<p>Send message</p>
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by csozidev - Tags: simple, button, light, challenge, simple button */
|
|
.button {
|
|
cursor: pointer;
|
|
display: flex;
|
|
height: 70px;
|
|
width: 205px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
border: none;
|
|
background: linear-gradient(0deg, #ebedeb, #ffffff);
|
|
border-radius: 15px;
|
|
position: relative;
|
|
box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.button::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 96%;
|
|
background: linear-gradient(180deg, #ebedeb, #ffffff);
|
|
height: 80%;
|
|
border-radius: 100px;
|
|
z-index: 5;
|
|
}
|
|
|
|
button::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: calc(100% + 6px);
|
|
background: linear-gradient(0deg, #7e807e, #e3e6e4);
|
|
height: calc(100% + 6px);
|
|
z-index: -1;
|
|
border-radius: 18px;
|
|
top: -3px;
|
|
left: -3px;
|
|
}
|
|
|
|
.button svg {
|
|
stroke-linecap: round;
|
|
width: 20px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.button p {
|
|
white-space: nowrap;
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
z-index: 10;
|
|
}
|
|
|
|
</style>
|
|
|