how to format a button with a hover effect in SharePoint Online with JSON

Question

I would like to design a Button function for rejection adn approvals in a SharePoint list. In this list I want to have a hover effect. As soon as the user hover over the Button it should change the color.

I hope you can help me. Here is my cod so far:

{
 "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column- formatting.schema.json",
"elmType": "button",
 "txtContent": "='Pending Approval' + ' ' +[$Progressing_x0020_Status.lookupValue]",
"customRowAction": {
  "action": "executeFlow",
  "actionParams": "{\"id\": \"19312da0-fe21-4fc1-bafa-ec1ab25e94ec\"}"
},
 "style": {
"background-color": "#828282",
"color": "white",
"border-radius": "10px",
"visibility": {
  "operator": "?",
  "operands": [
    {
      "operator": "==",
      "operands": [
        "[$Progressing_x0020_Status.lookupValue]",
        "in progress"
      ]
    },
    "",
    "hidden"
  ]
  }
}
}

Where I need to insert the hover effect? The color could be red e.g.

Best regards

Matthias

Answer 1

Hovereffects can be added using the class objects in attributes. Swap out "red" to color of your needs.

{
 "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column- formatting.schema.json",
"elmType": "button",
 "txtContent": "='Pending Approval' + ' ' +[$Progressing_x0020_Status.lookupValue]",
"customRowAction": {
  "action": "executeFlow",
  "actionParams": "{\"id\": \"19312da0-fe21-4fc1-bafa-ec1ab25e94ec\"}"
},
 "style": {
"background-color": "#828282",
"color": "white",
"border-radius": "10px",
"visibility": {
  "operator": "?",
  "operands": [
    {
      "operator": "==",
      "operands": [
        "[$Progressing_x0020_Status.lookupValue]",
        "in progress"
      ]
    },
    "",
    "hidden"
  ]
  }
  },
  "attributes": {
    "target": "_blank",
    "class": "ms-bgColor-red--hover",
    "href": {
      "operator": "+",
      "operands": [
        "http://tenant.sharepoint.com/sitename/_layouts/download.aspx?SourceUrl=http://tenant.sharepoint.com/sitename/Library/",
        "@currentField"
      ]
    }
  }
}