پیشنمایش زنده
کد HTML
<button class="archiveBtn" title="Unarchive">
<svg
height="512"
width="512"
viewBox="0 0 2048 2048"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="white"
d="m0 0 1233 1 13 3 13 7 10 9 8 9 7 14 3 13v743l-3 13-7 14-8 10-10 8-14 7-12 3-14 1h-1183l-83-1-13-4-10-5-11-9-9-11-6-13-4-16-1-56v-74l1-604 2-14 5-12 7-11 7-8 13-9 11-5 9-2zm432 234v190h321l2-1 1-41v-147l-1-1zm-122 334-10 3-8 5-8 9-7 16-15 40-4 14v10l4 12 7 9 9 6 9 3 12 1h593l13-2 10-5 8-8 5-10 2-12-2-12-16-43-7-16-6-9-7-6-10-4-5-1h-8l-9 2-10 6-8 9-4 9-1 5v11l4 12-495 1 4-10 1-4v-9l-3-10-6-10-7-6-8-4-8-2z"
class="toshrink"
></path>
<path
fill="white"
d="m0 0h947l15 3 12 5 12 7 12 11 9 13 6 13 3 11 1 7v297l-5-4-7-9-9-11-13-16-14-17-18-22-14-17-11-14-11-13-9-11-14-17-18-22-13-16-6-7-10-7-9-3-9-1h-709l-12 2-10 5-9 8-11 14-11 13-11 14-11 13-9 11-13 16-14 17-18 22-11 13-11 14-12 14-7 9-10 12-7 9-2 1-1-51v-225l1-23 3-14 5-12 7-11 11-12 14-10 14-6z"
class="toremainasis"
></path>
<path
fill="white"
d="m0 0 646 1 12 5 9 9 5 10 2 10v32l-1 1h-710l-1-1v-36l3-9 5-9 8-7 11-5z"
class="tocome"
></path>
<path
fill="white"
d="m0 0h833l12 3 11 7 7 8 5 10 2 8v42l-1 1h-905v-45l4-11 6-9 9-8 8-4z"
class="tocome2"
></path>
</svg>
</button>
کد CSS
.archiveBtn {
width: 76.5px;
height: 76.5px;
border-radius: 22.1px;
background-color: rgb(86, 88, 130);
border: 5.1px solid rgb(180, 183, 200);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 8.5px 17px rgba(0, 0, 0, 0.123);
cursor: pointer;
overflow: hidden;
transition: all 0.3s;
position: relative;
}
.archiveBtn::before {
content: "";
width: 340%;
height: 340%;
background-color: rgb(37, 61, 100);
position: absolute;
z-index: 1;
transform: scale(0);
transition: all 0.3s;
border-radius: 50%;
filter: blur(17px);
}
.archiveBtn:hover::before {
transform: scale(1);
}
.archiveBtn:hover {
box-shadow: 0px 8.5px 17px rgba(0, 0, 0, 0.336);
background-color: rgb(37, 100, 61);
}
.archiveBtn svg {
height: 3.1875em;
width: 3.1875em;
fill: white;
z-index: 3;
transition: all 0.2s;
transform-origin: bottom;
}
.archiveBtn svg .toshrink {
transform: translateX(28%) translateY(37%) scale(0.788);
transition: transform 0.3s ease-in-out;
}
.archiveBtn:hover svg .toshrink {
transform: translateX(22%) translateY(55%);
transition: transform 0.3s ease-in-out;
}
.archiveBtn svg .tocome {
transform: scale(0);
transition: transform 0.45s ease-in-out;
}
.archiveBtn:hover svg .tocome {
transform: translateX(35.5%) translateY(37%);
transition: transform 0.45s ease-in-out;
}
.archiveBtn svg .tocome2 {
transform: scale(0);
transition: transform 0.45s ease-in-out;
}
.archiveBtn:hover svg .tocome2 {
transform: translateX(30.8%) translateY(45%);
transition: transform 0.4s ease-in-out;
}
.archiveBtn svg .toremainasis {
transform: translateX(28%) translateY(37%);
transition: transform 0.3s ease-in-out;
}
.archiveBtn:hover svg .toremainasis {
transform: translateX(28%) translateY(22%);
transition: transform 0.3s ease-in-out;
}