sharepoint online – Extra hover CSS on Fabric control in SPFx webpart

As you are using Office UI Fabric/Fluent UI button control, it must have the ms-Button class applied to it.

So, you can override the CSS of that class in your code like below. You can change the color codes as per your requirements.

.ms-Button:hover {
    color: #fff !important;
    border-color: #0460a9 !important;
    background-color: #0460a9 !important;

If you want to override the CSS for:

  • Primary buttons –> override the .ms-Button--primary class
  • Standard buttons –> override the .ms-Button--default class