I am unable to change the color of the button in the UI PAGE

[Aman Gurram]

I am unable to change the color of the button in the UI PAGE

<style>

.button {

      background-color: #4CAF50;

}

</style>

<button class="button">Button</button>

For simplicity i have only included the background color. The CSS wont work at all. I am able to change the background colors for other elements, but for Buttons : No luck

Any help is appreciated.

[Srinivas Balusu]

Can you try with different class name?

[Aman Gurram]

Tried, no success.  

[Aman Gurram · Accepted solution]

ANSWER:

The button was placed in a DIV tag.

The DIV tag background color was overriding the buttons color.

CSS SPECIFICTY: CSS Specificity: Things You Should Know — Smashing Magazine

<style>

.button {

      background-color: #4CAF50 !important;

}

.x{

        background-color:yellow;

        }

</style>

<div class="x">

<button class="button">Button</button>

</div>

[Raymond Tapper]

I know this reply is 5 years too late, but I wanted to post this so others using San Diego will know what to do.

I found part of my answer here: https://servicenowguru.com/scripting/client-scripts-scripting/change-form-button-color/

I found the missing piece here: https://community.servicenow.com/community?id=community_question&sys_id=ecdd4f6ddb9cdbc01dcaf3231f96...

You need to check the UI actions for the form you are making changes to. I found the ID of the button in the "Action name" field.

The issue I had was only the top button was changing color. The bottom remained the same.


When I inspected the page, I found that the bottom button had a different ID.

Once I added the other id to the onload Client Script, both buttons changed color.

function onLoad() {
   //Change the color of the 'Request Approval' button to green
	changeButtonColor('state_model_request_assess_approval', '#00CC00');
	changeButtonColor('state_model_request_assess_approval_bottom', '#00CC00'); //I had to check the HTML to find that this button ID did not match what was in the UI action
	
}

function changeButtonColor(buttonID, backgroundColor) {
   try{
      //Find the button(s) by ID and change the background color
      $$('button[id=' + buttonID + ']').each(function(elmt) {
         elmt.style.backgroundColor = backgroundColor;
         //elmt.style.color = '#ffffff'; //make the button text white. I commented this out because I like the default text color.
      });
   }catch(e){}
}

I hope this helps someone else find their solution faster.