bug: .btn transform and "stretched link"

pawelpbm commented 7 months ago

What version of daisyUI are you using?

4.7.2

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/nkymmKsw2I

Describe your issue

In few places in my project I'm using "stretched link" - which is something I originally found in Bootstrap. I'm currently porting the project to Tailwind + Daisy and for that element I'm using suggestion provided in Tailwind's Github.

It was working fine on most of the elements where the link was just a text element but now I'm trying to get it working with .btn - and this is failing...

What happens: when hovering over the card, cursor changes to link coursor and browser shows the link in the bottom left, but when clicking it, nothing happens.

Minimal repro is here: https://play.tailwindcss.com/nkymmKsw2I

After quite a bit of messing with it I narrowed it down to .btn and specifically this part:

.btn:active:hover,
  .btn:active:focus {
  animation: button-pop 0s ease-out;
  transform: scale(var(--btn-focus-scale, 0.97));
}

When I add active:hover:transform-none active:focus:transform-none to the a element all is working fine.

I'm afraid I do not know HTML/CSS good enough to figure out if this is a bug or if I'm doing stuff wrong...

github-actions[bot] commented 7 months ago

Thank you @pawelpbm for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

saadeghi commented 7 months ago

You can fix this by adding focus:active:transform-none to the button.
https://play.tailwindcss.com/Naw2L95DoR

But this whole thing is unnecessary. It's much simpler to use a <a> tag for the card instead:
https://play.tailwindcss.com/p29aXyhLzJ

Let me know if you have a question.

pawelpbm commented 7 months ago

I have not thought about using a as the main card elements. Thanks!

saadeghi / daisyui