search

Nova-Scotia-Digital-Service / service-pattern-library

4 stars 2 forks source link

Links made to look like buttons have underlines #22

Closed gianpompilio closed 3 years ago

gianpompilio commented 3 years ago

Links made to look like buttons using the .btn classes have underlines.

The underlines appear to be set by saltire.css.

For example: 

<a id="YesButton" class="btn-xxl btn-default centered mr-4" href="yes-page.html">Yes</a>
<a id="NoButton" class="btn-xxl btn-default centered ml-5" href="no-page.html">No</a>

Possible fix may look something like this:

a[class*="btn"]:hover, a[class*="btn"]:focus {
    text-decoration-line: none !important;
}
connorscarolyns commented 3 years ago

@gianpompilio You can use this code to create a button link. I have added some small tweaks to the code base to fully align a link button with a semantic button and added an example to the button page. I would caution to use link buttons sparingly, if something is a link it should look like a link unless using a link button helps with the usability of the product.

Link button