mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
127 lines
No EOL
2.9 KiB
HTML
127 lines
No EOL
2.9 KiB
HTML
<button class="button">
|
|
<div class="button-inner-wrap">
|
|
<div class="button-content">
|
|
<svg
|
|
id="svg1"
|
|
version="1.1"
|
|
fill="none"
|
|
viewBox="0 0 17.191999 17.915001"
|
|
height="17.915001"
|
|
width="17.191999"
|
|
>
|
|
<path
|
|
id="path1"
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
stroke-width="1.5"
|
|
stroke="#000000"
|
|
d="M 9.3223611,8.9119975 H 3.5673455 m -0.17238,0.7972 -1.3313244,3.0014005 c -0.8349111,2.493962 0.031033,4.403741 3.26073,2.9505 l 8.8532949,-4.5605 c 1.64001,-0.785228 1.659708,-3.5011752 0,-4.3772505 l -8.8707749,-4.56832 c -2.6423685,-1.18905255 -4.1290723,0.3343707 -3.26268,2.94464 l 1.3527044,3.09163 c 0.0935,0.2817 0.14026,0.4226 0.15871,0.5666 0.01638,0.1279 0.01621,0.2573 -4.9e-4,0.3851 -0.01883,0.144 -0.06594,0.2847 -0.16017,0.5662 z"
|
|
></path>
|
|
</svg>
|
|
|
|
<span>Send Message</span>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by joe-herbert - Tags: animation, button, hover, challenge */
|
|
.button {
|
|
cursor: pointer;
|
|
padding: 20px 15px;
|
|
font-weight: 600;
|
|
font-size: 17px;
|
|
font-family: sans-serif;
|
|
border-radius: 15px;
|
|
position: relative;
|
|
background-clip: padding-box;
|
|
border: solid 3px transparent;
|
|
width: 185px;
|
|
height: 65px;
|
|
box-shadow: 5px 5px 20px -5px #aaa;
|
|
transition: transform 0.3s;
|
|
}
|
|
.button span {
|
|
transition: opacity 0.3s 0.3s;
|
|
margin-left: 5px;
|
|
}
|
|
.button:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
margin: -3px;
|
|
border-radius: inherit;
|
|
background: linear-gradient(to bottom, #ccc, #666);
|
|
}
|
|
.button:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: linear-gradient(to bottom, #eee, #ddd);
|
|
border-radius: 15px;
|
|
}
|
|
.button-content {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
transform: translateY(-50%);
|
|
}
|
|
.button-content:before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: calc(-50% - 2.5px);
|
|
right: 5px;
|
|
bottom: 5px;
|
|
left: 5px;
|
|
background: linear-gradient(to bottom, #dfdfdf, #efefef);
|
|
border-radius: 500px;
|
|
height: 50px;
|
|
transition: opacity 0.3s 0.3s;
|
|
filter: blur(1px);
|
|
}
|
|
.button svg {
|
|
position: relative;
|
|
left: 0;
|
|
width: 20px;
|
|
transform: rotate(-45deg);
|
|
transition: left 0.3s 0s, transform 0.3s 0s;
|
|
}
|
|
|
|
.button:hover .button-content:before,
|
|
.button:hover span {
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
.button:hover svg {
|
|
transition: left 0.6s 0.3s, transform 0.6s 0.3s;
|
|
left: calc(50% - 17.5px);
|
|
transform: translate(-50%, 2px) rotate(270deg) scale(1.5);
|
|
}
|
|
.button:active {
|
|
transform: scale(0.9);
|
|
}
|
|
.button:active svg {
|
|
animation: spin 0.4s ease-in-out 0.3s 1;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: translate(-50%, 2px) rotate(270deg) scale(1.5);
|
|
}
|
|
to {
|
|
transform: translate(-50%, 2px) rotate(630deg) scale(1.5);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|