Button Colors + on hover

[Maciek Grischke]

I couldn’t find anything about changing Button colors apart from this old question: Save/Cancel Button Background color

I already have some of my buttons customised slightly, different text, save for later button (I managed to change the background color, but the color is fixed and doesn’t change when I hover the mouse over)

So now that I have three buttons:

Save for later, Submit, Cancel

I’d like to change their colors, something similar to what we can see in DFFS setup for Save, Save and create restore point, Cancel and Delete.

Standard colors and “on-mouse-hover” colors – is this possible?

Many thanks.

[Alexander Bautz]

Hi,
You can add Custom CSS like this (change the colors to match your color scheme):

input[id$='_diidIOSaveItem']{
    color:white!important;
    background-color:red!important;
}
input[id$='_diidIOSaveItem']:hover{
    color:black!important;
    background-color:green!important;
}

This code targets the save button – ID attribute ends with _diidIOSaveItem.

Use the developer tools (right click > inspect) to find the ID of the button you like to modify.

Alexander

[Maciek Grischke]

Thanks Alexander, this worked, but I added

id='SaveForLater

to Save for later button

It looks like this now:

jQuery("input[id$='_diidIOSaveItem']").before("<input type='button' id='SaveForLater' class='ms-ButtonHeightWidth' style='margin-right:4px;' value='Save for later' onclick='saveForLater()' />");

Is this the correct way?

[Alexander Bautz]

Yes, this is correct.

Alexander

[Author]

Posts