Override theme for buttons

Forms SharePoint Online
1

How could I override the button colors from the current theme? I tried adding this to the button's Style setting:

background-color: #FDFDFD;
color: Black

But now there's no color change anymore when hovering over... and I'm not very fluent in CSS.
Could someone help me out? Thanks!

2

Hello @kloosterj,

Welcome to the Plumsail community!

To set the button style that will change on hover, please do the following:

  1. Add a CSS class in the settings of the button, e.g. newbutton
    image

  2. Add the following CSS to the CSS Editor. Specify the colors you want in the code.
    image

.newbutton {
    color: black;
    background-color: #FDFDFD;
    border-color: #0078d4;
}

/*button style on hover*/
.newbutton:hover {
    color: white;
    background-color: black;
    border-color: #0078d4;
}
3

Thanks, works a charm! Just one other question, your documentation refers to this page:
https://www.w3schools.com/bootstrap/bootstrap_ref_css_buttons.asp

How would I get the button to look like the "Default" variation on that page? Is that just 1 "Default" style setting, or do I need to specify all CSS styles separately?

Thanks in advance!

4

@kloosterj,

Could you please provide more information about what do you want to achieve?

Do you wan to duplicate default Save and Close buttons?

5

I want the Save and Close buttons to appear at the bottom, and look basically like the buttons found in the previous Forms Designer product. So I have removed the toolbar (as documented) and created new buttons at the bottom. Using your CSS I customized the appearance (which required adding !important by the way, to get it working).

But I was simply wondering if this could be achieved easier, by referring to the bootstrap ".btn-default" CSS style. Which would also make it easy to reuse/adapt when creating for instance a ".btn-success" button in the future.

6

@kloosterj,

You can change the styling of all primary buttons (e.g. Save button, controls' buttons, custom buttons) at once using .btn-primary CSS class.

.btn-primary {
    color: black !Important;
    background-color: #FDFDFD !Important;
    border-color: #0078d4 !Important;
}

/*button style on hover*/
.btn-primary:hover {
    color: white !Important;
    background-color: black !Important;
    border-color: #0078d4 !Important;
}
1 Like