类型：组件 · 分类：按钮 · 收录：2026-09-19 · 源码：会员可见
[hidecontent type="vip1"]<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>