پیشنمایش زنده
کد HTML
<button
class="group relative flex h-14 w-14 flex-col items-center justify-center overflow-hidden rounded-xl border-2 border-red-800 bg-red-400 hover:bg-red-600"
>
<svg
viewBox="0 0 1.625 1.625"
class="absolute -top-7 fill-white delay-100 group-hover:top-6 group-hover:animate-[spin_1.4s] group-hover:duration-1000"
height="15"
width="15"
>
<path
d="M.471 1.024v-.52a.1.1 0 0 0-.098.098v.618c0 .054.044.098.098.098h.487a.1.1 0 0 0 .098-.099h-.39c-.107 0-.195 0-.195-.195"
></path>
<path
d="M1.219.601h-.163A.1.1 0 0 1 .959.504V.341A.033.033 0 0 0 .926.309h-.26a.1.1 0 0 0-.098.098v.618c0 .054.044.098.098.098h.487a.1.1 0 0 0 .098-.099v-.39a.033.033 0 0 0-.032-.033"
></path>
<path
d="m1.245.465-.15-.15a.02.02 0 0 0-.016-.006.023.023 0 0 0-.023.022v.108c0 .036.029.065.065.065h.107a.023.023 0 0 0 .023-.023.02.02 0 0 0-.007-.016"
></path>
</svg>
<svg
width="16"
fill="none"
viewBox="0 0 39 7"
class="origin-right duration-500 group-hover:rotate-90"
>
<line stroke-width="4" stroke="white" y2="5" x2="39" y1="5"></line>
<line
stroke-width="3"
stroke="white"
y2="1.5"
x2="26.0357"
y1="1.5"
x1="12"
></line>
</svg>
<svg width="16" fill="none" viewBox="0 0 33 39" class="">
<mask fill="white" id="path-1-inside-1_8_19">
<path
d="M0 0H33V35C33 37.2091 31.2091 39 29 39H4C1.79086 39 0 37.2091 0 35V0Z"
></path>
</mask>
<path
mask="url(#path-1-inside-1_8_19)"
fill="white"
d="M0 0H33H0ZM37 35C37 39.4183 33.4183 43 29 43H4C-0.418278 43 -4 39.4183 -4 35H4H29H37ZM4 43C-0.418278 43 -4 39.4183 -4 35V0H4V35V43ZM37 0V35C37 39.4183 33.4183 43 29 43V35V0H37Z"
></path>
<path stroke-width="4" stroke="white" d="M12 6L12 29"></path>
<path stroke-width="4" stroke="white" d="M21 6V29"></path>
</svg>
</button>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-top-7 {
top: -1.75rem;
}
.flex {
display: flex;
}
.h-14 {
height: 3.5rem;
}
.w-14 {
width: 3.5rem;
}
.origin-right {
transform-origin: right;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-xl {
border-radius: 0.75rem;
}
.border-2 {
border-width: 2px;
}
.border-red-800 {
--tw-border-opacity: 1;
border-color: rgb(153 27 27 / var(--tw-border-opacity));
}
.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}
.fill-white {
fill: #fff;
}
.delay-100 {
transition-delay: 100ms;
}
.duration-500 {
transition-duration: 500ms;
}
.hover\:bg-red-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:top-6 {
top: 1.5rem;
}
.group:hover .group-hover\:rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.group:hover .group-hover\:animate-\[spin_1\.4s\] {
animation: spin 1.4s;
}
.group:hover .group-hover\:duration-1000 {
transition-duration: 1000ms;
}