Button as links do not have hover states

[pangolingo]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Using version 0.6.4.

Steps to reproduce

1. Create 2 button components
2. Set the as prop to a for the first button
3. Leave the second button as-is (it should use a <button> element)
4. Hover your cursor over each button

import { Button } from "flowbite-react";

<Button>Click this button</Button>
<Button as="a" href="#">Click this link</Button>

Current behavior

The standard button shows a hover state.
The link button is unchanged (no hover state).

Expected behavior

Both buttons show a hover state

Context

We are using Next.js, and are using <button>s, <a>s and <Link>s in various places. The hover state only works for buttons. We would it expect it to work for anchors too.

This may have been caused by this PR: #830

The Tailwind enabled modifier only works on buttons and inputs - not on links which don't have an enabled state.

[pangolingo]

I've also noticed that outline buttons don't have a hover state at all. I assume this is expected behavior so I haven't filed an issue.

[tylerhackbart]

Also experiencing this issue

[rluders]

@pangolingo @tylerhackbart can you folks update to 0.7.0@beta and check if the issue still happening?

[pangolingo]

@pangolingo @tylerhackbart can you folks update to 0.7.0@beta and check if the issue still happening?

I confirmed that this issue is still present on v0.7.0.

In this example I pass an href prop instead an as="a" prop.

<Button color="blue" className="my-5 w-fit" href="/projects/new">
  Start New Project
</Button>
<Button color="blue" className="my-5 w-fit">
  Start New Project
</Button>

[MorganFrary]

Also encountering this issue - not the end of the world but definitely not ideal.

[Mukilan1600]

@rluders - This is caused due to anchor tags not supporting :enabled pseudo class, not just the anchor tag but any element that doesn't support disabled will break the styling if passed to as=.
Not sure what can be done to fix except to change the layout of the button component, if you have any simple fix in mind I can try it

[OFK0]

hi, my temporary solution for "a" tags;

[&:is(a)]:hover:bg-gray-100