SharePoint Column Formatting with Hyperlink

I have a hyperlink column called "LinkUrl" and a text column called "CategoryTitle". I want to apply column formatting where I can Show the CategoryTitle as button and onClick, it redirects to the link in "LinkUrl". I was able to successfully achieve it using below:

 {
        "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
        "elmType": "button",
            "txtContent": "@currentField",
            "style": {
              "background-color" : "green",
              "padding": "4px 4px",
              "cursor": "pointer"
             
            }
       
        ,
        "children": [
          {
            "elmType": "a",
        "attributes": {
          "href": "[$LinkUrl]",
          "target": "_blank"
          }
        }
        ]

      }

However, now, instead of "background-color" green, I want to show a gradient as below:

linear-gradient(72.44deg, rgb(230, 251, 254) 0%, rgb(237, 221, 251) 100%);

This works on a separate CSS (without column formatting) and when I directly change it using Inspect element on above column too. However, when I save the code with above liner-gradient, it doesn't apply gradient. Only solid color works.

I even tried using "background" property instead of "background-color" and tried using "div" instead of "button" but nothing works.

Is this limitation of column view formatting?