mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
130 lines
No EOL
3.8 KiB
HTML
130 lines
No EOL
3.8 KiB
HTML
<button class="button">
|
|
<svg
|
|
viewBox="0 0 48 48"
|
|
height="100"
|
|
width="100"
|
|
y="0px"
|
|
x="0px"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M39.175,10.016c1.687,0,2.131,1.276,1.632,4.272c-0.571,3.426-2.216,14.769-3.528,21.83 c-0.502,2.702-1.407,3.867-2.724,3.867c-0.724,0-1.572-0.352-2.546-0.995c-1.32-0.872-7.984-5.279-9.431-6.314 c-1.32-0.943-3.141-2.078-0.857-4.312c0.813-0.796,6.14-5.883,10.29-9.842c0.443-0.423,0.072-1.068-0.42-1.068 c-0.112,0-0.231,0.034-0.347,0.111c-5.594,3.71-13.351,8.859-14.338,9.53c-0.987,0.67-1.949,1.1-3.231,1.1 c-0.655,0-1.394-0.112-2.263-0.362c-1.943-0.558-3.84-1.223-4.579-1.477c-2.845-0.976-2.17-2.241,0.593-3.457 c11.078-4.873,25.413-10.815,27.392-11.637C36.746,10.461,38.178,10.016,39.175,10.016 M39.175,7.016L39.175,7.016 c-1.368,0-3.015,0.441-5.506,1.474L33.37,8.614C22.735,13.03,13.092,17.128,6.218,20.152c-1.074,0.473-4.341,1.91-4.214,4.916 c0.054,1.297,0.768,3.065,3.856,4.124l0.228,0.078c0.862,0.297,2.657,0.916,4.497,1.445c1.12,0.322,2.132,0.478,3.091,0.478 c1.664,0,2.953-0.475,3.961-1.028c-0.005,0.168-0.001,0.337,0.012,0.507c0.182,2.312,1.97,3.58,3.038,4.338l0.149,0.106 c1.577,1.128,8.714,5.843,9.522,6.376c1.521,1.004,2.894,1.491,4.199,1.491c2.052,0,4.703-1.096,5.673-6.318 c0.921-4.953,1.985-11.872,2.762-16.924c0.331-2.156,0.603-3.924,0.776-4.961c0.349-2.094,0.509-4.466-0.948-6.185 C42.208,7.875,41.08,7.016,39.175,7.016L39.175,7.016z"
|
|
></path>
|
|
</svg>
|
|
|
|
Send Message
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by MRez321 - Tags: button, hover, animated, hover button, #button, button hover effect */
|
|
.button {
|
|
position: relative;
|
|
z-index: 5;
|
|
isolation: isolate;
|
|
cursor: pointer;
|
|
transition: 0.4s;
|
|
|
|
width: fit-content;
|
|
height: 4.8rem;
|
|
padding: 1rem;
|
|
margin-inline: auto;
|
|
border: solid 3px;
|
|
border-color: #0000004d #0000004d #00000080 #00000080;
|
|
border-radius: 0.8rem;
|
|
|
|
font-family: cursive;
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
|
|
animation: boxShadowRotation 2s linear infinite;
|
|
}
|
|
.button:hover,
|
|
.button:active {
|
|
scale: 0.96;
|
|
border-color: #00000080 #00000080 #0000004d #0000004d;
|
|
padding: 2rem;
|
|
box-shadow: 0 0 4px 2px rgba(208, 212, 218, 0.979);
|
|
background: #fbfdfc;
|
|
}
|
|
|
|
.button::before,
|
|
.button::after {
|
|
position: absolute;
|
|
content: "";
|
|
background: #f4f5f4;
|
|
transition: 0.4s;
|
|
}
|
|
.button::before {
|
|
z-index: -1;
|
|
inset: 0.3rem;
|
|
border-radius: 4rem;
|
|
box-shadow: inset 0 0 4px 2px rgba(208, 212, 218, 0.979);
|
|
}
|
|
.button:hover::before {
|
|
inset: 0.1rem;
|
|
z-index: -1;
|
|
margin-inline: auto;
|
|
border: solid 1px;
|
|
border-color: #00000080 #00000080 #0000004d #0000004d;
|
|
border-radius: 0.8rem;
|
|
animation: boxShadowRotation 2s linear infinite;
|
|
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
|
|
}
|
|
.button::after {
|
|
background: none;
|
|
z-index: -2;
|
|
border-radius: 1rem;
|
|
}
|
|
.button:hover::after {
|
|
inset: -0.5rem;
|
|
border: solid 1px #00000080;
|
|
box-shadow: 0 0 10px 4px #a1c4fd;
|
|
background: #c2e9fb;
|
|
}
|
|
|
|
.button svg {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
z-index: 10;
|
|
}
|
|
.button:hover svg {
|
|
animation: rotation 0.8s linear;
|
|
filter: drop-shadow(0 0 10px 10px rgb(170, 166, 166));
|
|
}
|
|
|
|
@keyframes rotation {
|
|
0% {
|
|
transform: rotate(0deg) translate(0, 0) scale(1);
|
|
}
|
|
50% {
|
|
transform: rotate(180deg) translate(-4rem, -2rem) scale(1.4);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg) translate(0, 0) scale(1);
|
|
}
|
|
}
|
|
@keyframes boxShadowRotation {
|
|
0% {
|
|
box-shadow: inset 10px 10px 20px rgba(29, 43, 83, 0.2);
|
|
}
|
|
25% {
|
|
box-shadow: inset -10px 10px 20px rgba(29, 43, 83, 0.2);
|
|
}
|
|
50% {
|
|
box-shadow: inset -10px -10px 20px rgba(29, 43, 83, 0.2);
|
|
}
|
|
75% {
|
|
box-shadow: inset 10px -10px 20px rgba(29, 43, 83, 0.2);
|
|
}
|
|
100% {
|
|
box-shadow: inset 10px 10px 20px rgba(29, 43, 83, 0.2);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|