پیشنمایش زنده
کد HTML
<button class="Btn">
<span class="svgContainer">
<svg
viewBox="0 0 512 512"
fill="white"
height="1.6em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M256 8C119.3 8 8 119.3 8 256s111.3 248 248 248 248-111.3 248-248S392.7 8 256 8zm164 114.4c29.5 36 47.4 82 47.8 132-7-1.5-77-15.7-147.5-6.8-5.8-14-11.2-26.4-18.6-41.6 78.3-32 113.8-77.5 118.3-83.5zM396.4 97.9c-3.8 5.4-35.7 48.3-111 76.5-34.7-63.8-73.2-116.2-79-124 67.2-16.2 138 1.3 190.1 47.5zm-230.5-33.3c5.6 7.7 43.4 60.1 78.5 122.5-99.1 26.3-186.4 25.9-195.8 25.8C62.4 147.2 106.7 92.6 165.9 64.6zM44.2 256.3c0-2.2 0-4.3 .1-6.5 9.3 .2 111.9 1.5 217.7-30.1 6.1 11.9 11.9 23.9 17.2 35.9-76.6 21.6-146.2 83.5-180.5 142.3C64.8 360.4 44.2 310.7 44.2 256.3zm81.8 167.1c22.1-45.2 82.2-103.6 167.6-132.8 29.7 77.3 42 142.1 45.2 160.6-68.1 29-150 21.1-212.8-27.9zm248.4 8.5c-2.2-12.9-13.4-74.9-41.2-151 66.4-10.6 124.7 6.8 131.9 9.1-9.4 58.9-43.3 109.8-90.8 142z"
></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: #ea4c89;
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 #ffb4cf;
background-color: rgba(216, 216, 216, 0.466);
backdrop-filter: blur(4px);
}