Button's active css styling/animation is not the same with mobile and web

[chardskarth]

dioxus.active.button.mov

Is there a way to make the button feel like it's being clicked (while it's being hold down).

[wheregmis]

This is why we need to use dioxus-motion, an animation library for dioxus. (Promotion). Just kidding. Can you drop the button element with css? I can try during my spare time.

[chardskarth]

Thanks a lot! I want to learn rust and contribute so let me know if there's anything I can (try to) do to help.

To set it up, I just followed this guide: https://dioxuslabs.com/learn/0.6/cookbook/tailwind

Then css' active styles are added by adding the .btn class. I also use this crate: daisy_rsx = "0.1.14"

Here's my button component:

use daisy_rsx::Button as DaisyButton;
use dioxus::prelude::*;

#[component]
pub fn Button(text: String) -> Element {
    rsx! {
        button {
            class: "
                btn btn-outline my-2 mx-8
                bg-violet-500 hover:bg-violet-600 active:bg-violet-700
                ",
                // focus:outline-none focus:ring focus:ring-violet-300
            "{text}"
        }
        DaisyButton {
            "{text}"
        }
    }
}

[wheregmis]

After having a look, Mobile browsers render the :active pseudo-class differently.
Touch events are distinct from mouse events, necessitating touch-specific handling. I have attached button component which works on all platforms, you can have a try

#[component]
pub fn Button(text: String) -> Element {
    rsx! {
        button { class: "
                btn btn-outline my-2 mx-8 p-4
                bg-violet-500 hover:bg-violet-600 
                active:bg-violet-700 active:scale-95
                active:shadow-inner
                transform transition-all duration-150 ease-in-out
                shadow-lg hover:shadow-xl
                origin-center
                rounded-lg
                text-white font-semibold
            ",
            "{text}"
        }
    }
}