پیشنمایش زنده
کد HTML
<button class="group group-hover:before:duration-500 group-hover:after:duration-500 after:duration-500 hover:border-rose-300 hover:before:[box-shadow:_20px_20px_20px_30px_#a21caf] duration-500 before:duration-500 hover:duration-500 underline underline-offset-2 hover:after:-right-8 hover:before:right-12 hover:before:-bottom-8 hover:before:blur hover:underline hover:underline-offset-4 origin-left hover:decoration-2 hover:text-rose-300 relative bg-neutral-800 h-16 w-64 border text-left p-3 text-gray-50 text-base font-bold rounded-lg overflow-hidden before:absolute before:w-12 before:h-12 before:content[''] before:right-1 before:top-1 before:z-10 before:bg-violet-500 before:rounded-full before:blur-lg after:absolute after:z-10 after:w-20 after:h-20 after:content[''] after:bg-rose-300 after:right-8 after:top-3 after:rounded-full after:blur-lg">
See more
</button>
کد CSS
.relative{position:relative}.h-16{height:4rem}.w-64{width:16rem}.origin-left{transform-origin:left}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity))}.p-3{padding:0.75rem}.text-left{text-align:left}.text-base{font-size:1rem;line-height:1.5rem}.font-bold{font-weight:700}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.duration-500{transition-duration:500ms}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:right-1::before{content:var(--tw-content);right:0.25rem}.before\:top-1::before{content:var(--tw-content);top:0.25rem}.before\:z-10::before{content:var(--tw-content);z-index:10}.before\:h-12::before{content:var(--tw-content);height:3rem}.before\:w-12::before{content:var(--tw-content);width:3rem}.before\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\:bg-violet-500::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(139 92 246 / var(--tw-bg-opacity))}.before\:blur-lg::before{content:var(--tw-content);--tw-blur:blur(16px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.before\:duration-500::before{content:var(--tw-content);transition-duration:500ms}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:right-8::after{content:var(--tw-content);right:2rem}.after\:top-3::after{content:var(--tw-content);top:0.75rem}.after\:z-10::after{content:var(--tw-content);z-index:10}.after\:h-20::after{content:var(--tw-content);height:5rem}.after\:w-20::after{content:var(--tw-content);width:5rem}.after\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\:bg-rose-300::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(253 164 175 / var(--tw-bg-opacity))}.after\:blur-lg::after{content:var(--tw-content);--tw-blur:blur(16px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.after\:duration-500::after{content:var(--tw-content);transition-duration:500ms}.hover\:border-rose-300:hover{--tw-border-opacity:1;border-color:rgb(253 164 175 / var(--tw-border-opacity))}.hover\:text-rose-300:hover{--tw-text-opacity:1;color:rgb(253 164 175 / var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.hover\:decoration-2:hover{text-decoration-thickness:2px}.hover\:underline-offset-4:hover{text-underline-offset:4px}.hover\:duration-500:hover{transition-duration:500ms}.hover\:before\:-bottom-8:hover::before{content:var(--tw-content);bottom:-2rem}.hover\:before\:right-12:hover::before{content:var(--tw-content);right:3rem}.hover\:before\:blur:hover::before{content:var(--tw-content);--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:before\:\[box-shadow\:_20px_20px_20px_30px_\#a21caf\]:hover::before{content:var(--tw-content);box-shadow:20px 20px 20px 30px #a21caf}.hover\:after\:-right-8:hover::after{content:var(--tw-content);right:-2rem}.group:hover .group-hover\:before\:duration-500::before{content:var(--tw-content);transition-duration:500ms}.group:hover .group-hover\:after\:duration-500::after{content:var(--tw-content);transition-duration:500ms}