پیشنمایش زنده
کد HTML
<button
title="Add New"
class="group cursor-pointer outline-none hover:rotate-90 duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="50px"
height="50px"
viewBox="0 0 24 24"
class="stroke-zinc-400 fill-none group-hover:fill-zinc-800 group-active:stroke-zinc-200 group-active:fill-zinc-600 group-active:duration-0 duration-300"
>
<path
d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
stroke-width="1.5"
></path>
<path d="M8 12H16" stroke-width="1.5"></path>
<path d="M12 16V8" stroke-width="1.5"></path>
</svg>
</button>
کد CSS
.cursor-pointer{cursor:pointer}.fill-none{fill:none}.stroke-zinc-400{stroke:#a1a1aa}.outline-none{outline:2px solid transparent;outline-offset:2px}.duration-300{transition-duration:300ms}.hover\:rotate-90:hover{--tw-rotate:90deg;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\:fill-zinc-800{fill:#27272a}.group:active .group-active\:fill-zinc-600{fill:#52525b}.group:active .group-active\:stroke-zinc-200{stroke:#e4e4e7}.group:active .group-active\:duration-0{transition-duration:0s}