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

[ForrestLin]

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

[KittyHurley · Accepted solution]

@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>

[ForrestLin]

@KittyHurley 

Thank you!

[ACrateau]

@KittyHurley  Is it possible to use the same logic to increase the default font size and weight of a button's text?    I'm trying the same approach you provided here and adding the CSS properties font-weight and font-size, but the renderer is ignoring them - any thoughts?

[KittyHurley]

@ACrateau Yes, you can do so using the --calcite-font-size-relative-base and --calcite-font-weight-normal (deprecated) tokens: https://codepen.io/geospatialem/pen/ZYpayqW.

#custom-btn {
    --calcite-font-size-relative-base: var(--calcite-font-size-relative-lg);
  /* Note that --calcite-font-weight-normal is deprecated, but still supported in Button */
  --calcite-font-weight-normal: var(--calcite-font-weight-bold);
}

While --calcite-font-weight-normal is supported it is deprecated, but the team is working on support for the replacement --calcite-font-weight-regular token soon. Additional information can be sought and followed via issue #14190.