پیشنمایش زنده
کد HTML
<div class="wrapper">
<button class="btn-delete">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="btn-svg">
<path
fill-rule="evenodd"
d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
clip-rule="evenodd"
></path>
</svg>
Shred
</button>
<div class="document"></div>
<svg
class="shredded"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 154.57 151.52"
>
<path
class="shred"
d="M22.74,0v59.49c0,3.37-.21,7.86-.53,12.79-1.34,20.7-4.18,32.27-8.35,52.58l-6.96,24.13"
></path>
<path
class="shred"
d="M33.65,0v59.49c0,3.37-.17,7.86-.42,12.79-1.07,20.7-3.34,32.27-6.68,52.58l-5.57,24.13"
></path>
<path
class="shred"
d="M44.56,0v59.49c0,3.37-.13,7.86-.32,12.79-.8,20.7-2.51,32.27-5.01,52.58l-4.18,24.13"
></path>
<path
class="shred"
d="M55.47,0v59.49c0,3.37-.08,7.86-.21,12.79-.54,20.7-1.67,32.27-3.34,52.58l-2.78,24.13"
></path>
<path
class="shred"
d="M66.37,0v59.49c0,3.37-.04,7.86-.11,12.79-.27,20.7-.84,32.27-1.67,52.58l-1.39,24.13"
></path>
<path
class="shred"
d="M77.28,0v59.49c0,3.37,0,7.86,0,12.79,0,20.7,0,32.27,0,52.58v24.13"
></path>
<path
class="shred"
d="M88.19,0v59.49c0,3.37.04,7.86.11,12.79.27,20.7.84,32.27,1.67,52.58l1.39,24.13"
></path>
<path
class="shred"
d="M99.1,0v59.49c0,3.37.08,7.86.21,12.79.54,20.7,1.67,32.27,3.34,52.58l2.78,24.13"
></path>
<path
class="shred"
d="M110.01,0v59.49c0,3.37.13,7.86.32,12.79.8,20.7,2.51,32.27,5.01,52.58l4.18,24.13"
></path>
<path
class="shred"
d="M120.92,0v59.49c0,3.37.17,7.86.42,12.79,1.07,20.7,3.34,32.27,6.68,52.58l5.57,24.13"
></path>
<path
class="shred"
d="M131.83,0v59.49c0,3.37.21,7.86.53,12.79,1.34,20.7,4.18,32.27,8.35,52.58l6.96,24.13"
></path>
</svg>
</div>
کد CSS
.wrapper {
position: relative;
}
.btn-delete {
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
user-select: none;
border: none;
border-radius: 10px;
padding: 0.5rem 1.4rem 0.5rem 1rem;
background-color: rgb(255, 0, 0);
background-image: radial-gradient(circle at 50% -50%, #fff, 10%, #0000);
font-family: "Inter", sans-serif;
font-weight: 600;
font-size: 0.9em;
color: #fff;
cursor: pointer;
box-shadow:
0px 1px 1px rgba(3, 7, 18, 0.16),
0px 3px 4px rgba(3, 7, 18, 0.14),
0px 7px 9px rgba(3, 7, 18, 0.11),
0px 12px 16px rgba(3, 7, 18, 0.09),
0px 19px 26px rgba(3, 7, 18, 0.07),
0px 27px 37px rgba(3, 7, 18, 0.05),
0px 37px 50px rgba(3, 7, 18, 0.02);
transition:
box-shadow 0.3s ease,
transform 0.15s ease;
}
.btn-delete::after,
.btn-delete::before {
content: "";
position: absolute;
top: calc(50% - 10px);
left: 0px;
width: 10px;
aspect-ratio: 1 / 2;
border-radius: 35%;
background-color: inherit;
opacity: 1;
transition:
left 0.3s ease,
right 0.3s ease,
opacity 0.3s ease;
}
.btn-delete::after {
left: auto;
right: 0px;
}
.btn-svg {
width: 24px;
height: 24px;
fill: #fff9;
stroke: #fff0;
transition: transform 0.3s ease;
}
.btn-delete:hover {
box-shadow:
0px 3px 4px rgba(3, 7, 18, 0.13),
0px 14px 17px rgba(3, 7, 18, 0.11),
0px 31px 38px rgba(3, 7, 18, 0.09),
0px 55px 67px rgba(3, 7, 18, 0.07),
0px 86px 105px rgba(3, 7, 18, 0.06),
0px 124px 151px rgba(3, 7, 18, 0.04),
0px 169px 206px rgba(3, 7, 18, 0.02);
transform: scale(1.07);
}
.btn-delete:hover .btn-svg {
transform: rotate(-8deg) scale(1.8);
}
.btn-delete:hover::after {
opacity: 1;
right: -4px;
}
.btn-delete:hover::before {
opacity: 1;
left: -4px;
}
.btn-delete:active::after {
right: 0px;
}
.btn-delete:active::before {
left: 0px;
}
.document {
z-index: -1;
position: absolute;
top: -180%;
left: 50%;
width: 78%;
height: 160px;
background-color: #fff;
border: 1px solid #0002;
transform: translate(-50%, 0%) scale(0);
transition:
transform 0.3s ease,
opacity 1s ease;
filter: drop-shadow(0 0 5px #0001);
opacity: 0;
}
.btn-delete:hover ~ .document {
transform: translate(-50%, -30%) scale(1);
opacity: 1;
}
.btn-delete:focus ~ .document {
animation: feed 1.5s forwards;
transform: translate(-50%, -50%) scale(1);
}
.shredded {
position: absolute;
z-index: -1;
stroke: #fff;
fill: none;
stroke-width: 0;
filter: drop-shadow(0 0 5px #0001);
}
.btn-delete:focus ~ .shredded {
animation: shred 1.5s cubic-bezier(1, 0.6, 0.6, 1) reverse;
}
@keyframes feed {
0% {
clip-path: inset(0% 0% 0% 0%);
}
100% {
clip-path: inset(100% 0% 0% 0%);
}
}
@keyframes shred {
0% {
stroke-width: 9;
opacity: 0;
clip-path: inset(0% 0% 0% 0%);
}
30% {
opacity: 1;
}
100% {
stroke-width: 9;
clip-path: inset(0% 0% 100% 0%);
}
}