Possible to edit the hover CSS for the button?

[sjnair]

This is a great tool, thanks for creating it! I can't believe how messy authorization is, and this library makes it much easier.

The button seems to go red on hover by default. It looks like that's defined in style.css?

button:hover {
  color: white;
  width:;
  /* box-shadow: 0 0 20px rgba(104, 85, 224, 0.6); */
  background-color: var(--primary-color);
}

Is it possible to define these colors in the Streamlit code, for instance here:

result = oauth2.authorize_button(
        name="Sign-in with Google",
        icon="https://www.google.com.tw/favicon.ico",
        redirect_uri="http://localhost:8501/",
        scope="openid email profile",
        key="google",
        extras_params={"prompt": "consent", "access_type": "offline"},
        use_container_width=False,
        pkce='S256',
    )

Or using this library means the button will always be red on hover?

I tried using theming via the config.toml file but it didn't seem to affect the hover color.

[dnplus]

Thanks for sharing

It's possible to add style in code, but obviously there are so many options can be added

Suggest use theming, works for me with theming method

[sjnair]

Thanks @dnplus, this seems to be due to a separate issue because regardless of anything I put in my config.toml file, I am not seeing the changes when I run my app. So, nothing to do with streamlit-oauth! Once I get that working, I will use the theming to change this.