I'm attempting to modify the background color of a button and also change the text color inside the button. While I was successful in changing the button's color, the text color remained the same. Even after adding a hover effect to the text, the color only changed when the mouse hovered over it.
<li
class="text-gray-900 cursor-pointer select-none p-4 text-sm md:hover:red"
id="listbox-option-0"
role="option"
>
<button class="flex flex-col">
<div class="flex justify-">
<p class="font-normal">Published</p>
<span class="text-black">
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"
/>
</svg>
</span>
</div>
<p class="text-gray-500 mt-2">
This job posting can be viewed by anyone who has
the link.
</p>
</button>
</li>
My goal is to change the text color within the button whenever the user interacts with it, not just when hovering over the text itself. How can I achieve this?