پیشنمایش زنده
کد 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-orange-400 fill-none group-hover:fill-orange-800 group-active:stroke-orange-200 group-active:fill-orange-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-orange-400 {
stroke: #fb923c;
}
.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-orange-800 {
fill: #9a3412;
}
.group:active .group-active\:fill-orange-600 {
fill: #ea580c;
}
.group:active .group-active\:stroke-orange-200 {
stroke: #fed7aa;
}
.group:active .group-active\:duration-0 {
transition-duration: 0s;
}