Add hover effects to the 'CSS blend mode' buttons.

[moo-light]

Hey i'm a hacktoberfest beginner! Can you assign me to add some css Animation features
and also
can i fix one css line? the icon is a little off

[muhammadhafijur]

@moo-light Hi, Could you clarify what exactly you'd like to fix regarding the icon (may be you can add a before after screenshot), and what specific animations you'd like to add? This will help ensure we're on the same page.

Best wishes!

[moo-light]

I want to change all the buttons animation UI to make it more interactable by hovering and have an animation
but i wonder if i should put it in sliding animation

or just plain old color change from 0%->100%

with the button icon i can add a little shake to it

[muhammadhafijur]

I want to keep it minimal and clean. But you can add a hover effect on these buttons. For example, bg-gray-100 on the hover state. Make sure to add hover:bg-green-500 for the active button logic so that the color won't change when hovering on the active button. You can also add a little transition to the button. Do let me know if you want to work on this, and then I will assign you.

[moo-light]

Yeah totally

what you think i should change for the icon buttons

And can you assign me the copy button alignment too

Thank you very much

[muhammadhafijur]

I want to keep it minimal and clean. But you can add a hover effect on these buttons. For example, bg-gray-100 on the hover state. Make sure to add hover:bg-green-500 for the active button logic so that the color won't change when hovering on the active button. You can also add a little transition to the button. Do let me know if you want to work on this, and then I will assign you.

I can assign you this task, but for the copy button and icon button, could you give me a quick preview of what you plan to do? You can easily create it in Tailwind Play and share the link here. I'll take a look at it. Or you can give me a before after screenshot as well.

[moo-light]

i want to adjust the icon spacing and text spacing so that it look evenly spaced

Example: https://play.tailwindcss.com/jzXPw6dFCJ

and i think for all the icon consistency i might remove the copy button hover rotating effect

or adding rotating effect for all the button

in the image you can see the yellow button background color changed and the svg rotated a little bit

[muhammadhafijur]

You can fix the copy button and add a conditional class like this :class="{'group-hover:stroke-emerald-500 stroke-emerald-500 rotate-[-4deg]': showCopyTooltip}" . don't need to change the hover rotate effect on copy button.

Also for rotating effect you can raise a PR. Then I will look on to it.

[moo-light]

Thank for the advice of grouping classes in tailwind i will take note on that

please assign me the task with the button hovering effect in this issue.

I will make 2 more issue regarding the Copy button and the icon button hover animation effect so we can discuss more on there.

Thank again you for your patient

[muhammadhafijur]

Thank for the advice of grouping classes in tailwind i will take note on that

please assign me the task with the button hovering effect in this issue.

@moo-light Assigned. Looking forward to it.