Tailwind prevent button border hovering from triggering the hover event

Issue

I am currently facing a weird issue with a project of mine

I am attempting to make a button change its color when I hover over it and also change the text's color inside of the button

This works perfectly until I hover over the border button which triggers the hover event for the whole button but not the text inside of it

<a class="min-w-full lg:min-w-[0px]" target="_blank" href="https://stackoverflow.com">
        <button
            type="button"
            class="border-4 border-github rounded-[12px] min-w-full lg:min-w-[0px] mx-1 mb-4 lg:mb-2 py-2 hover:bg-github transition duration-200 ease-in-out">
            <span
                class="w-full h-full select-none text-github text-2xl lg:text-3xl lg:px-
         [6.625rem] font-semibold hover:text-background transition duration-100">   
        check this out
       </span>
    </button>
</a>

How could I make the border of a button not trigger the hover event ?

Or are there any other better ways to do what I am trying to do?

Solution

group-hover

https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

Try this:

<a class="min-w-full lg:min-w-[0px]" target="_blank" href="https://stackoverflow.com">
  <button type="button" class="group border-4 border-github rounded-[12px] min-w-full lg:min-w-[0px] mx-1 mb-4 lg:mb-2 py-2 hover:bg-github transition duration-200 ease-in-out">
    <span class="w-full h-full select-none text-github text-2xl lg:text-3xl lg:px- [6.625rem] font-semibold group-hover:text-background transition duration-100"> check this out </span>
  </button>
</a>

Answered By - You