پیشنمایش زنده
کد HTML
<button
class="relative inline-flex items-center justify-center px-8 py-2.5 overflow-hidden tracking-tighter text-white bg-gray-800 rounded-md group"
>
<span
class="absolute w-0 h-0 transition-all duration-500 ease-out bg-orange-600 rounded-full group-hover:w-56 group-hover:h-56"
></span>
<span class="absolute bottom-0 left-0 h-full -ml-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-auto h-full opacity-100 object-stretch"
viewBox="0 0 487 487"
>
<path
fill-opacity=".1"
fill-rule="nonzero"
fill="#FFF"
d="M0 .3c67 2.1 134.1 4.3 186.3 37 52.2 32.7 89.6 95.8 112.8 150.6 23.2 54.8 32.3 101.4 61.2 149.9 28.9 48.4 77.7 98.8 126.4 149.2H0V.3z"
></path>
</svg>
</span>
<span class="absolute top-0 right-0 w-12 h-full -mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="object-cover w-full h-full"
viewBox="0 0 487 487"
>
<path
fill-opacity=".1"
fill-rule="nonzero"
fill="#FFF"
d="M487 486.7c-66.1-3.6-132.3-7.3-186.3-37s-95.9-85.3-126.2-137.2c-30.4-51.8-49.3-99.9-76.5-151.4C70.9 109.6 35.6 54.8.3 0H487v486.7z"
></path>
</svg>
</span>
<span
class="absolute inset-0 w-full h-full -mt-1 rounded-lg opacity-30 bg-gradient-to-b from-transparent via-transparent to-gray-200"
></span>
<span class="relative text-base font-semibold">Hover Me !</span>
</button>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.inset-0 {
inset: 0px;
}
.bottom-0 {
bottom: 0px;
}
.left-0 {
left: 0px;
}
.right-0 {
right: 0px;
}
.top-0 {
top: 0px;
}
.-ml-2 {
margin-left: -0.5rem;
}
.-mr-3 {
margin-right: -0.75rem;
}
.-mt-1 {
margin-top: -0.25rem;
}
.inline-flex {
display: inline-flex;
}
.h-0 {
height: 0px;
}
.h-full {
height: 100%;
}
.w-0 {
width: 0px;
}
.w-12 {
width: 3rem;
}
.w-auto {
width: auto;
}
.w-full {
width: 100%;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.bg-orange-600 {
--tw-bg-opacity: 1;
background-color: rgb(234 88 12 / var(--tw-bg-opacity));
}
.bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.from-transparent {
--tw-gradient-from: transparent var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-transparent {
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from),
transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-gray-200 {
--tw-gradient-to: #e5e7eb var(--tw-gradient-to-position);
}
.object-cover {
object-fit: cover;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.font-semibold {
font-weight: 600;
}
.tracking-tighter {
letter-spacing: -0.05em;
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.opacity-100 {
opacity: 1;
}
.opacity-30 {
opacity: 0.3;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-500 {
transition-duration: 500ms;
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.group:hover .group-hover\:h-56 {
height: 14rem;
}
.group:hover .group-hover\:w-56 {
width: 14rem;
}