پیشنمایش زنده
کد HTML
<button
class="group relative outline-0 bg-sky-200 [--sz-btn:68px] [--space:calc(var(--sz-btn)/5.5)] [--gen-sz:calc(var(--space)*2)] [--sz-text:calc(var(--sz-btn)-var(--gen-sz))] h-[var(--sz-btn)] w-[var(--sz-btn)] border border-solid border-transparent rounded-xl flex items-center justify-center aspect-square cursor-pointer transition-transform duration-200 active:scale-[0.95] bg-[linear-gradient(45deg,#efad21,#ffd60f)] [box-shadow:#3c40434d_0_1px_2px_0,#3c404326_0_2px_6px_2px,#0000004d_0_30px_60px_-30px,#34343459_0_-2px_6px_0_inset]"
>
<svg
class="animate-pulse absolute z-10 overflow-visible transition-all duration-300 text-[#ffea50] group-hover:text-white top-[calc(var(--sz-text)/7)] left-[calc(var(--sz-text)/7)] h-[var(--gen-sz)] w-[var(--gen-sz)] group-hover:h-[var(--sz-text)] group-hover:w-[var(--sz-text)] group-hover:left-[calc(var(--sz-text)/4)] group-hover:top-[calc(calc(var(--gen-sz))/2)]"
stroke="none"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9 4.5a.75.75 0 01.721.544l.813 2.846a3.75 3.75 0 002.576 2.576l2.846.813a.75.75 0 010 1.442l-2.846.813a3.75 3.75 0 00-2.576 2.576l-.813 2.846a.75.75 0 01-1.442 0l-.813-2.846a3.75 3.75 0 00-2.576-2.576l-2.846-.813a.75.75 0 010-1.442l2.846-.813A3.75 3.75 0 007.466 7.89l.813-2.846A.75.75 0 019 4.5zM18 1.5a.75.75 0 01.728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 010 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 01-1.456 0l-.258-1.036a2.625 2.625 0 00-1.91-1.91l-1.036-.258a.75.75 0 010-1.456l1.036-.258a2.625 2.625 0 001.91-1.91l.258-1.036A.75.75 0 0118 1.5zM16.5 15a.75.75 0 01.712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 010 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 01-1.422 0l-.395-1.183a1.5 1.5 0 00-.948-.948l-1.183-.395a.75.75 0 010-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0116.5 15z"
></path>
</svg>
<span
class="[font-size:var(--sz-text)] font-extrabold leading-none text-white transition-all duration-200 group-hover:opacity-0"
>AI</span
>
</button>
کد CSS
.absolute{position:absolute}.relative{position:relative}.left-\[calc\(var\(--sz-text\)\/7\)\]{left:calc(var(--sz-text) / 7)}.top-\[calc\(var\(--sz-text\)\/7\)\]{top:calc(var(--sz-text) / 7)}.z-10{z-index:10}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.h-\[var\(--gen-sz\)\]{height:var(--gen-sz)}.h-\[var\(--sz-btn\)\]{height:var(--sz-btn)}.w-\[var\(--gen-sz\)\]{width:var(--gen-sz)}.w-\[var\(--sz-btn\)\]{width:var(--sz-btn)}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-visible{overflow:visible}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-solid{border-style:solid}.border-transparent{border-color:transparent}.bg-sky-200{--tw-bg-opacity:1;background-color:rgb(186 230 253 / var(--tw-bg-opacity))}.bg-\[linear-gradient\(45deg\2c \#efad21\2c \#ffd60f\)\]{background-image:linear-gradient(45deg,#efad21,#ffd60f)}.font-extrabold{font-weight:800}.leading-none{line-height:1}.text-\[\#ffea50\]{--tw-text-opacity:1;color:rgb(255 234 80 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.outline-0{outline-width:0px}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}.\[--gen-sz\:calc\(var\(--space\)\*2\)\]{--gen-sz:calc(var(--space) * 2)}.\[--space\:calc\(var\(--sz-btn\)\/5\.5\)\]{--space:calc(var(--sz-btn) / 5.5)}.\[--sz-btn\:68px\]{--sz-btn:68px}.\[--sz-text\:calc\(var\(--sz-btn\)-var\(--gen-sz\)\)\]{--sz-text:calc(var(--sz-btn) - var(--gen-sz))}.\[box-shadow\:\#3c40434d_0_1px_2px_0\2c \#3c404326_0_2px_6px_2px\2c \#0000004d_0_30px_60px_-30px\2c \#34343459_0_-2px_6px_0_inset\]{box-shadow:#3c40434d 0 1px 2px 0,#3c404326 0 2px 6px 2px,#0000004d 0 30px 60px -30px,#34343459 0 -2px 6px 0 inset}.\[font-size\:var\(--sz-text\)\]{font-size:var(--sz-text)}.active\:scale-\[0\.95\]:active{--tw-scale-x:0.95;--tw-scale-y:0.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-\[calc\(var\(--sz-text\)\/4\)\]{left:calc(var(--sz-text) / 4)}.group:hover .group-hover\:top-\[calc\(calc\(var\(--gen-sz\)\)\/2\)\]{top:calc(calc(var(--gen-sz)) / 2)}.group:hover .group-hover\:h-\[var\(--sz-text\)\]{height:var(--sz-text)}.group:hover .group-hover\:w-\[var\(--sz-text\)\]{width:var(--sz-text)}.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.group:hover .group-hover\:opacity-0{opacity:0}