How do you style the text in a calcite button

AdamCrateau

I'm using my own CSS stylesheet for the <calcite-button> element, but have not been successful at increasing the default size and font-weight of the text in the button.  I've set the [scale] to "l" for large and it's not large enough.   

I'm working within ArcGIS Hub and wanting to make a prominent button that directs users to another application (loads on a separate tab).  I'm using the calcite-button within a text element on the page.  Here is my current HTML.  the corner-radius and button-padding styles are working, the font size and weight are not...

  <style>

    calcite-button{

      --calcite-button-corner-radius: 5px;

      --calcite-internal-button-padding-x: 30px;

      font-size: var(--calcite-font-size-relative-xl);

    font-weight: var(--calcite-font-weight-semibold);

    }

  </style>

  

<calcite-button appearance="solid" target="_blank" text-label="Submit Request" scale="l" href="xyz" alignment="center" kind="brand" type="button" width="auto" split-child="false" calcite-hydrated="">Submit Request</calcite-button>

 

AdamCrateau

I ended up using a standard anchor <a> element styled as a button.  Using the --calcite CSS variables ensure the colors will match with the hub site's theme...

<style>
   .btn-submit {
     text-decoration: none !important;
     background-color: var(--calcite-color-brand);
     color: var(--calcite-color-text-inverse);
     border-radius: 4px;
     border: none;
     padding: 12px 30px;
     min-width: 120px;
     font-size: 1.3rem;
     font-weight: 500;
     outline: none;
   }
   
   .btn-submit:hover {
     background-color: var(--calcite-color-brand-hover);
     outline: none;
     color: var(--calcite-color-text-inverse);
     cursor: pointer;
   }
</style>
 
<div style="text-align: center;">
  <a class="btn-submit" href="***" target="_blank" rel="noopener noreferrer">
   Submit Request
  </a>
</div>