Custom view rowformatter - how to make a hyperlink look like a button

Question

I have a list with a hyperlink field. I want to format the link to look like a button. I have tried a gazillion websites, gotten all kinds of CSS, but none of it seems to work.

I've tried two approaches - creating a button and creating an anchor hyperlink. The button type doesn't seem reasonable, as the "action" value set is limited to row list actions (open, edit, delete, etc.)

Here's a sample of what I've tried using an anchor hyperlink:

{
  "elmType": "a",
  "txtContent": "Go to Client Data",
  "style": {
    "text-align": "center",
    "display": "inline-block",
    "padding": "4px 4px 4px 4px"
  },
  "attributes": {
    "class": "sp-field-quickAction",
    "href": "[$ClientSiteURL]",
    "target": "_blank"
  }
}

Answer 1

Please use the below JSON Formatting:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "[$ClientSiteURL]",
    "target": "_blank"
  },
  "children": [
    {
      "elmType": "button",
      "txtContent": "Go to the Client Site URL",
      "style": {
        "background-color": "#E6E6FA",
        "color": "#2F4F4F",
        "width": "100%",
        "font-weight": "bold"
      }
    }
  ]
}

Answer 2

Use JSON like below to create hyperlink with button:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "[$ClientSiteURL]",
    "target": "_blank"
  },
  "style": {
    "text-decoration": "none"
  },
  "children": [
    {
      "elmType": "button",
      "txtContent": "Go to Client Data",
      "style": {
        "cursor": "pointer",
        "width": "100%"
      }
    }
  ]
}

Sample output:

Documentation: Use column formatting to customize SharePoint

---

Where [$ClientSiteURL] is an internal name of your column which stores hyperlink value in SharePoint list in this format: [$InternalNameOfColumn].

You can get the internal name of your SharePoint list columns by following this article: How to find the Internal name of columns in SharePoint Online?