Skip to main content
Answer

Changing the colour of the sign in button only

  • July 6, 2022
  • 6 replies
  • 157 views

Forum|alt.badge.img

Hi,

Does anybody know the CSS for changing the background colour of the sign in button (not SSO) and colour of the text?

Thanks in advance.

Gigi

Best answer by gstager

Give this a go.

As always - be sure to test

/** Login Button Tweaks **/
/** Set desired color for button with background-color **/
/** Set desired color of text with color **/

div.login-button button {
background-color: #000000 !important;
color:#00ff00 !important;
}

Hope this helps!

6 replies

gstager
Hero III
Forum|alt.badge.img+8
  • Hero III
  • Answer
  • July 6, 2022

Give this a go.

As always - be sure to test

/** Login Button Tweaks **/
/** Set desired color for button with background-color **/
/** Set desired color of text with color **/

div.login-button button {
background-color: #000000 !important;
color:#00ff00 !important;
}

Hope this helps!


Forum|alt.badge.img
  • Author
  • Contributor III
  • July 6, 2022

@gstager thank you very much.

 

This one worked at the end: 

ui-button-raised.ui-button-negative button {background-color: #777!important;}

 

Gigi

 


gstager
Hero III
Forum|alt.badge.img+8
  • Hero III
  • July 6, 2022

OK

There is more than one way to accomplish things - to be sure!

Your code will affect more than just the login button - though - but perhaps that is more what you were looking for…?

I was trying to target just that login button for you.


Bfarkas
Hero III
Forum|alt.badge.img+6
  • Hero III
  • July 6, 2022

Tagging onto @gstager, that second solve, ui-button-raised.ui-button-negative button, is also more likely to change in the long run in updates since it has several classes and a string of them rather than the one element.


Forum|alt.badge.img
  • Author
  • Contributor III
  • July 6, 2022

Thank you both, I see your point. Has changed the reference to the login-button only and used the code suggested by @gstager . It worked a treat, thank you.

Gigi


hwolfehall
Helper I
Forum|alt.badge.img+2
  • Helper I
  • March 3, 2023

As a side note, I needed to change the SSO login button to be “less visible” (not the login button) and was able to adjust the above code a bit for that:  

 

/** SSO Login Button Tweaks **/

/** Set desired color for button with background-color **/

/** Set desired color of text with color **/

 

div.sso-buttons button {

    background-color:   

#FFFFFF !important;

    color:#ABB2BA !important;

}