پیشنمایش زنده
کد HTML
<button
class="group relative cursor-pointer outline-none border-none rounded-full flex flex-row items-center justify-center h-12 w-12 hover:!w-[100px] transition-all duration-[0.75s] before:content-[''] before:absolute before:w-full before:h-full before:inset-0 before:bg-[linear-gradient(130deg,#7209d4,#2832d4_33%,#00a5b2)] before:ring-4 before:ring-offset-4 before:ring-[#2832d4] before:rounded-full before:transition before:duration-300 before:ring-offset-[#fff] hover:before:scale-105 active:before:scale-95 text-white"
>
<svg
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
class="absolute left-2 group-hover:left-1.5 group-active:left-[10px] duration-300 transition-[left] z-10 w-8 h-8 text-white"
>
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
></path>
</svg>
<span
class="absolute right-1.5 text-[15px] font-semibold [--w:calc(100%-48px)] w-[--w] max-w-[--w] overflow-hidden flex items-center justify-end -z-[1] group-hover:z-[9] pointer-events-none select-none opacity-0 group-hover:opacity-100 text-transparent group-hover:text-inherit group-active:right-2 transition-all duration-[2s] group-hover:duration-300 group-active:scale-[0.85]"
>Github</span
>
</button>
کد CSS
.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.left-2{left:0.5rem}.right-1\.5{right:0.375rem}.-z-\[1\]{z-index:-1}.z-10{z-index:10}.flex{display:flex}.h-12{height:3rem}.h-8{height:2rem}.w-12{width:3rem}.w-8{width:2rem}.w-\[--w\]{width:var(--w)}.max-w-\[--w\]{max-width:var(--w)}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.border-none{border-style:none}.text-\[15px\]{font-size:15px}.font-semibold{font-weight:600}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.opacity-0{opacity:0}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition-\[left\]{transition-property:left;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-\[0\.75s\]{transition-duration:0.75s}.duration-\[2s\]{transition-duration:2s}.\[--w\:calc\(100\%-48px\)\]{--w:calc(100% - 48px)}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:inset-0::before{content:var(--tw-content);inset:0px}.before\:h-full::before{content:var(--tw-content);height:100%}.before\:w-full::before{content:var(--tw-content);width:100%}.before\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\:bg-\[linear-gradient\(130deg\2c \#7209d4\2c \#2832d4_33\%\2c \#00a5b2\)\]::before{content:var(--tw-content);background-image:linear-gradient(130deg,#7209d4,#2832d4 33%,#00a5b2)}.before\:ring-4::before{content:var(--tw-content);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.before\:ring-\[\#2832d4\]::before{content:var(--tw-content);--tw-ring-opacity:1;--tw-ring-color:rgb(40 50 212 / var(--tw-ring-opacity))}.before\:ring-offset-4::before{content:var(--tw-content);--tw-ring-offset-width:4px}.before\:ring-offset-\[\#fff\]::before{content:var(--tw-content);--tw-ring-offset-color:#fff}.before\:transition::before{content:var(--tw-content);transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.before\:duration-300::before{content:var(--tw-content);transition-duration:300ms}.before\:content-\[\'\'\]::before{--tw-content:'';content:var(--tw-content)}.hover\:\!w-\[100px\]:hover{width:100px !important}.hover\:before\:scale-105:hover::before{content:var(--tw-content);--tw-scale-x:1.05;--tw-scale-y:1.05;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))}.active\:before\:scale-95:active::before{content:var(--tw-content);--tw-scale-x:.95;--tw-scale-y:.95;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))}.group:hover .group-hover\:left-1\.5{left:0.375rem}.group:hover .group-hover\:z-\[9\]{z-index:9}.group:hover .group-hover\:text-inherit{color:inherit}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:duration-300{transition-duration:300ms}.group:active .group-active\:left-\[10px\]{left:10px}.group:active .group-active\:right-2{right:0.5rem}.group:active .group-active\:scale-\[0\.85\]{--tw-scale-x:0.85;--tw-scale-y:0.85;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))}