Select to view content in your preferred language

How to create a calcite button that looks like a link?

326
2
Jump to solution
07-03-2024 12:05 PM
ForrestLin
Frequent Contributor

How to create a calcite button that looks like a link?

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
KittyHurley
Esri Contributor

@ForrestLin You can use CSS to fit your use case, perhaps something like: https://codepen.io/geospatialem/pen/gONOLVG 

<style>
  calcite-button[href] {
    --calcite-color-brand: var(--calcite-color-text-link);
    text-decoration: underline solid var(--calcite-color-text-link);
  }
</style>

<calcite-button appearance="transparent" href="https://developers.arcgis.com/calcite-design-system/components/button">Button with a link</calcite-button>
<calcite-button>Button with no link</calcite-button>

View solution in original post

0 Kudos
2 Replies
KittyHurley
Esri Contributor

@ForrestLin You can use CSS to fit your use case, perhaps something like: https://codepen.io/geospatialem/pen/gONOLVG 

<style>
  calcite-button[href] {
    --calcite-color-brand: var(--calcite-color-text-link);
    text-decoration: underline solid var(--calcite-color-text-link);
  }
</style>

<calcite-button appearance="transparent" href="https://developers.arcgis.com/calcite-design-system/components/button">Button with a link</calcite-button>
<calcite-button>Button with no link</calcite-button>
0 Kudos
ForrestLin
Frequent Contributor

@KittyHurley 

Thank you!

0 Kudos