Is it possible to change the text decoration for a calcite button connected to a link?

KathrynBurke

Hello, is it possible to change the text decoration for a calcite button connected to a link?

I can edit whether or not there is a solid line text decoration (as seen below, where 'goals & plans' has it set to none), but I can't figure out what style setting I need to change to avoid the dotted line when hovering over link-embedded text.

The dotted underline does not go away even when text decoration is set to none.

Below, 'county organizations' button has default text decoration; 'goals & plans' button has "text-decoration: none;".

Mouse hovering over 'county organization' embedded link text.

Mouse hovering over 'county organizations' button only.

Mouse hovering over 'goals & plans' embedded link text.

The code I currently have is:

<style>
calcite-button {--calcite-button-background-color: #0e2b51; }
calcite-button:hover {--calcite-button-background-color: #657887;
--calcite-button-border-color: white; }
</style>

<calcite-button appearance="solid" scale="l" kind="brand" style="width: 25%;"><a style="text-decoration: none; color: white; font-weight: bold;" href="#cnyorg">County Organizations</a></calcite-button><calcite-button scale="l" kind="brand" style="width: 25%;"><a style="text-decoration: none; color: white; font-weight: bold;" href="#goals">Goals & Plans</a>

DitwanDPrice

Hey Kathryn,

I have a couple of clarifying questions, as I’m not able to reproduce the dotted lines you mentioned.

Would using the `href` property on the button to add the link suffice? This already applies link behavior to the button, so there wouldn’t be a need to insert an anchor tag inside it.

Is it possible that there are conflicting styles elsewhere in your app causing the dotted line under the links? I’m not seeing that behavior in this CodePen, which includes the code you provided above.