پیشنمایش زنده
کد HTML
<button
class="px-8 z-30 py-4 bg-rose-400 rounded-md text-white relative font-semibold after:-z-20 after:absolute after:h-1 after:w-1 after:bg-rose-800 after:left-5 overflow-hidden after:bottom-0 after:translate-y-full after:rounded-md after:hover:scale-[300] after:hover:transition-all after:hover:duration-700 after:transition-all after:duration-700 transition-all duration-700 [text-shadow:3px_5px_2px_#be123c;] hover:[text-shadow:2px_2px_2px_#fda4af] text-2xl"
>
Hover Me
</button>
کد CSS
.relative{position:relative}.z-30{z-index:30}.overflow-hidden{overflow:hidden}.rounded-md{border-radius:0.375rem}.bg-rose-400{--tw-bg-opacity:1;background-color:rgb(251 113 133 / var(--tw-bg-opacity))}.px-8{padding-left:2rem;padding-right:2rem}.py-4{padding-top:1rem;padding-bottom:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-700{transition-duration:700ms}.\[text-shadow\:3px_5px_2px_\#be123c\;\]{text-shadow:3px 5px 2px #be123c;}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:bottom-0::after{content:var(--tw-content);bottom:0px}.after\:left-5::after{content:var(--tw-content);left:1.25rem}.after\:-z-20::after{content:var(--tw-content);z-index:-20}.after\:h-1::after{content:var(--tw-content);height:0.25rem}.after\:w-1::after{content:var(--tw-content);width:0.25rem}.after\:translate-y-full::after{content:var(--tw-content);--tw-translate-y:100%;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))}.after\:rounded-md::after{content:var(--tw-content);border-radius:0.375rem}.after\:bg-rose-800::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(159 18 57 / var(--tw-bg-opacity))}.after\:transition-all::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\:duration-700::after{content:var(--tw-content);transition-duration:700ms}.hover\:\[text-shadow\:2px_2px_2px_\#fda4af\]:hover{text-shadow:2px 2px 2px #fda4af}.after\:hover\:scale-\[300\]:hover::after{content:var(--tw-content);--tw-scale-x:300;--tw-scale-y:300;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))}.after\:hover\:transition-all:hover::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\:hover\:duration-700:hover::after{content:var(--tw-content);transition-duration:700ms}