پیشنمایش زنده
کد HTML
<button
class="group flex justify-center items-center gap-2 group-hover:before:duration-500 group-hover:after:duration-500 after:duration-500 hover:border-neutral-900 duration-500 hover:duration-500 underline underline-offset-2 hover:underline hover:underline-offset-4 origin-left hover:decoration-2 hover:text-neutral-300 relative bg-neutral-900 px-10 py-4 border text-left p-3 text-gray-50 text-base font-bold rounded-lg overflow-hidden after:absolute after:z-10 after:w-12 after:h-12 after:content[''] after:bg-sky-900 after:-left-8 after:top-8 after:rounded-full after:blur-lg hover:after:animate-pulse"
>
<svg
class="w-6 h-6 fill-neutral-50"
height="100"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 100 100"
width="100"
x="0"
xmlns="http://www.w3.org/2000/svg"
y="0"
>
<path
class="svg-fill-primary"
d="M50,1.23A50,50,0,0,0,34.2,98.68c2.5.46,3.41-1.09,3.41-2.41s0-4.33-.07-8.5c-13.91,3-16.84-6.71-16.84-6.71-2.28-5.77-5.55-7.31-5.55-7.31-4.54-3.1.34-3,.34-3,5,.35,7.66,5.15,7.66,5.15C27.61,83.5,34.85,81.3,37.7,80a10.72,10.72,0,0,1,3.17-6.69C29.77,72.07,18.1,67.78,18.1,48.62A19.34,19.34,0,0,1,23.25,35.2c-.52-1.26-2.23-6.34.49-13.23,0,0,4.19-1.34,13.75,5.13a47.18,47.18,0,0,1,25,0C72.07,20.63,76.26,22,76.26,22c2.72,6.89,1,12,.49,13.23a19.28,19.28,0,0,1,5.14,13.42c0,19.21-11.69,23.44-22.83,24.67,1.8,1.55,3.4,4.6,3.4,9.26,0,6.69-.06,12.08-.06,13.72,0,1.34.9,2.89,3.44,2.4A50,50,0,0,0,50,1.23Z"
></path>
</svg>
Github
</button>
کد CSS
.relative{position:relative}.flex{display:flex}.h-6{height:1.5rem}.w-6{width:1.5rem}.origin-left{transform-origin:left}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23 / var(--tw-bg-opacity))}.fill-neutral-50{fill:#fafafa}.p-3{padding:0.75rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.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}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:-left-8::after{content:var(--tw-content);left:-2rem}.after\:top-8::after{content:var(--tw-content);top:2rem}.after\:z-10::after{content:var(--tw-content);z-index:10}.after\:h-12::after{content:var(--tw-content);height:3rem}.after\:w-12::after{content:var(--tw-content);width:3rem}.after\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\:bg-sky-900::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(12 74 110 / 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-neutral-900:hover{--tw-border-opacity:1;border-color:rgb(23 23 23 / var(--tw-border-opacity))}.hover\:text-neutral-300:hover{--tw-text-opacity:1;color:rgb(212 212 212 / 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}@keyframes pulse{50%{content:var(--tw-content);opacity:.5}}.hover\:after\:animate-pulse:hover::after{content:var(--tw-content);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.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}