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.

[fabridb]

What if theming is not an option? How can i reach the button with the css? I set key="btgoogle" but .st-key-btgoogle is not giving the expected result.
.st-key-btgoogle button{} doesn't work.

[dnplus]

I believe you need to do some tricks with css

but I don't have much experience with

[fabridb]

There is no way to reach the button i think. What if authorize_button has one more parameter: array for CSS Script. Anyway, thank you for your attention. Em qui., 15 de mai. de 2025 às 23:48, Dylan Lu ***@***.***> escreveu:

…

I believe you need to do some tricks with css but I don't have much experience with — Reply to this email directly, view it on GitHub <#46 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A7AQ5IOGLSSAPCKUQH6UKWD26VGW7AVCNFSM6AAAAAB5BSXCD2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGMJWGU3DQMQ> . You are receiving this because you commented.Message ID: ***@***.***>