mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
63 lines
No EOL
1.6 KiB
HTML
63 lines
No EOL
1.6 KiB
HTML
<button class="button">
|
|
<i>
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<defs></defs>
|
|
<title></title>
|
|
<path
|
|
class="a"
|
|
d="M2.758,15.629a1.664,1.664,0,0,1-.882-3.075L20.359,1A1.663,1.663,0,0,1,22.875,2.72L19.281,21.893a1.664,1.664,0,0,1-2.966.691L11.1,15.629Z"
|
|
></path>
|
|
<path
|
|
class="a"
|
|
d="M11.1,15.629H8.6V20.8a1.663,1.663,0,0,0,2.6,1.374l3.178-2.166Z"
|
|
></path>
|
|
<line class="a" x1="11.098" x2="22.178" y1="15.629" y2="1.039"></line>
|
|
</svg>
|
|
Send Message</i
|
|
>
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by SiddhantEngineer - Tags: simple, button, rounded, smooth, creative, advanced, click effect, 3d button */
|
|
.button {
|
|
box-sizing: border-box;
|
|
background: hsl(0, 0%, 91%);
|
|
padding: 5px 2px;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 1px 2px 1px hsl(0, 0%, 50%), 0px 10px 35px 0px hsl(0, 0%, 65%),
|
|
0px -10px 35px 0px hsl(0, 0%, 100%);
|
|
border: none;
|
|
font-size: 16px;
|
|
background-clip: padding-box;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: all 0.1s;
|
|
}
|
|
|
|
.button:active {
|
|
scale: 99%;
|
|
box-shadow: 0px 1px 2px 1px hsl(0, 0%, 70%), 0px 10px 35px 0px hsl(0, 0%, 75%),
|
|
0px -10px 35px 0px hsl(0, 0%, 100%);
|
|
}
|
|
|
|
.button > i {
|
|
background: linear-gradient(hsl(0, 0%, 80%), hsl(0, 0%, 93%));
|
|
box-shadow: 0px 5px 20px -10px hsl(0, 0%, 60%);
|
|
padding: 15px;
|
|
border-radius: 20px;
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
display: flex;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.button > i > svg {
|
|
width: 15px;
|
|
margin-right: 5px;
|
|
fill: none;
|
|
stroke: black;
|
|
pointer-events: none;
|
|
}
|
|
|
|
</style>
|
|
|