پیشنمایش زنده
کد HTML
<button
class="group cursor-pointer outline-none hover:rotate-90 duration-300"
title="Add New"
>
<svg
class="stroke-yellow-400 fill-none group-hover:fill-yellow-800 group-active:stroke-yellow-200 group-active:fill-yellow-600 group-active:duration-0 duration-300"
viewBox="0 0 24 24"
height="50px"
width="50px"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-width="1.5"
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"
></path>
<path stroke-width="1.5" d="M8 12H16"></path>
<path stroke-width="1.5" d="M12 16V8"></path>
</svg>
</button>
کد CSS
.cursor-pointer {
cursor: pointer;
}
.fill-none {
fill: none;
}
.stroke-yellow-400 {
stroke: #facc15;
}
.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-yellow-800 {
fill: #854d0e;
}
.group:active .group-active\:fill-yellow-600 {
fill: #ca8a04;
}
.group:active .group-active\:stroke-yellow-200 {
stroke: #fef08a;
}
.group:active .group-active\:duration-0 {
transition-duration: 0s;
}