پیشنمایش زنده
کد HTML
<button class="bg-red-950 text-red-400 border border-red-400 border-b-4 font-medium overflow-hidden relative px-4 py-2 rounded-md hover:brightness-150 hover:border-t-4 hover:border-b active:opacity-75 outline-none duration-300 group">
<span class="bg-red-400 shadow-red-400 absolute -top-[150%] left-0 inline-flex w-80 h-[5px] rounded-md opacity-50 group-hover:top-[150%] duration-500 shadow-[0_0_10px_10px_rgba(0,0,0,0.3)]"></span>
Hover Me
</button>
کد CSS
.absolute{position:absolute}.relative{position:relative}.-top-\[150\%\]{top:-150%}.left-0{left:0px}.inline-flex{display:inline-flex}.h-\[5px\]{height:5px}.w-80{width:20rem}.overflow-hidden{overflow:hidden}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-b-4{border-bottom-width:4px}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity))}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity))}.bg-red-950{--tw-bg-opacity:1;background-color:rgb(69 10 10 / var(--tw-bg-opacity))}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.font-medium{font-weight:500}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity))}.opacity-50{opacity:0.5}.shadow-\[0_0_10px_10px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{--tw-shadow:0 0 10px 10px rgba(0,0,0,0.3);--tw-shadow-colored:0 0 10px 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-red-400{--tw-shadow-color:#f87171;--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.hover\:border-b:hover{border-bottom-width:1px}.hover\:border-t-4:hover{border-top-width:4px}.hover\:brightness-150:hover{--tw-brightness:brightness(1.5);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)}.active\:opacity-75:active{opacity:0.75}.group:hover .group-hover\:top-\[150\%\]{top:150%}