Button Colors + on hover

Forums General discussion Button Colors + on hover

Tagged: , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Alexander Bautz 2 months ago.

  • Author
    Posts
  • #24732

    Maciek Grischke
    Participant

    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.

  • #24740

    Alexander Bautz
    Keymaster

    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

  • #24805

    Maciek Grischke
    Participant

    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?

  • #24812

    Alexander Bautz
    Keymaster

    Yes, this is correct.

    Alexander

You must be logged in to reply to this topic.