پیشنمایش زنده
کد HTML
<button
class="group flex items-center justify-center relative z-10 [transition:all_0.5s_ease] rounded-[0.375rem] p-[5px] cursor-pointer border border-[#999] outline-none focus-visible:outline-0"
>
<svg
fill="currentColor"
stroke="none"
stroke-width="0"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
class="w-7 h-7 overflow-visible [transition:transform_.35s_ease] group-hover:[transition-delay:.25s] [&_path]:[transition:transform_.35s_ease] group-hover:rotate-45"
>
<path
class="group-hover:[transform:rotate(112.5deg)_translate(-27.2%,-80.2%)]"
d="m3.45,8.83c-.39,0-.76-.23-.92-.62-.21-.51.03-1.1.54-1.31L14.71,2.08c.51-.21,1.1.03,1.31.54.21.51-.03,1.1-.54,1.31L3.84,8.75c-.13.05-.25.08-.38.08Z"
></path>
<path
class="group-hover:[transform:rotate(22.5deg)_translate(15.5%,-23%)]"
d="m2.02,17.13c-.39,0-.76-.23-.92-.62-.21-.51.03-1.1.54-1.31L21.6,6.94c.51-.21,1.1.03,1.31.54.21.51-.03,1.1-.54,1.31L2.4,17.06c-.13.05-.25.08-.38.08Z"
></path>
<path
class="group-hover:[transform:rotate(112.5deg)_translate(-15%,-149.5%)]"
d="m8.91,21.99c-.39,0-.76-.23-.92-.62-.21-.51.03-1.1.54-1.31l11.64-4.82c.51-.21,1.1.03,1.31.54.21.51-.03,1.1-.54,1.31l-11.64,4.82c-.13.05-.25.08-.38.08Z"
></path>
</svg>
</button>
کد CSS
.relative{position:relative}.z-10{z-index:10}.flex{display:flex}.h-7{height:1.75rem}.w-7{width:1.75rem}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-visible{overflow:visible}.rounded-\[0\.375rem\]{border-radius:0.375rem}.border{border-width:1px}.border-\[\#999\]{--tw-border-opacity:1;border-color:rgb(153 153 153 / var(--tw-border-opacity))}.p-\[5px\]{padding:5px}.outline-none{outline:2px solid transparent;outline-offset:2px}.\[transition\:all_0\.5s_ease\]{transition:all 0.5s ease}.\[transition\:transform_\.35s_ease\]{transition:transform .35s ease}.focus-visible\:outline-0:focus-visible{outline-width:0px}.group:hover .group-hover\:rotate-45{--tw-rotate:45deg;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\:\[transform\:rotate\(112\.5deg\)_translate\(-15\%\2c -149\.5\%\)\]{transform:rotate(112.5deg) translate(-15%,-149.5%)}.group:hover .group-hover\:\[transform\:rotate\(112\.5deg\)_translate\(-27\.2\%\2c -80\.2\%\)\]{transform:rotate(112.5deg) translate(-27.2%,-80.2%)}.group:hover .group-hover\:\[transform\:rotate\(22\.5deg\)_translate\(15\.5\%\2c -23\%\)\]{transform:rotate(22.5deg) translate(15.5%,-23%)}.group:hover .group-hover\:\[transition-delay\:\.25s\]{transition-delay:.25s}.\[\&_path\]\:\[transition\:transform_\.35s_ease\] path{transition:transform .35s ease}