پیشنمایش زنده
کد HTML
<button class="Btn">
<span class="svgContainer">
<svg
viewBox="0 0 640 512"
fill="white"
height="1.4em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"
></path>
</svg>
</span>
<span class="BG"></span>
</button>
کد CSS
.Btn {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background-color: transparent;
position: relative;
/* overflow: hidden; */
border-radius: 7px;
cursor: pointer;
transition: all 0.3s;
}
.svgContainer {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
backdrop-filter: blur(0px);
letter-spacing: 0.8px;
border-radius: 10px;
transition: all 0.3s;
border: 1px solid rgba(156, 156, 156, 0.466);
}
.BG {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #7289da;
z-index: -1;
border-radius: 10px;
pointer-events: none;
transition: all 0.3s;
}
.Btn:hover .BG {
transform: rotate(35deg);
transform-origin: bottom;
}
.Btn:hover .svgContainer {
border: 1px solid rgba(206, 206, 206, 0.466);
background-color: rgba(214, 214, 214, 0.466);
backdrop-filter: blur(4px);
}