A hypertext link takes someone to another resource or location. Use a link for navigation and a button for an action, such as removing an item from a cart. Either can look like a button, but its HTML element should match its purpose: browsers and assistive technologies give the two elements different behaviors and roles. For example, a user can right-click a link to open it in a new tab or window. section 8.2.2
A link that looks like a button
A checkout link can be a primary call to action, while a Continue Shopping link can be secondary. Give links and buttons shared base styles, then use reusable primary and secondary classes for their different colors. Keep visible hover and focus outlines so the controls remain clear during interaction. section 8.2.2
For an icon-based share link, size the link to 48 by 48 pixels and center its 24-pixel icon with flex. A 50% border radius makes the link circular. Add a transparent border before hover or focus; changing its color later will not shift nearby content. section 11.5.3
Listing 11.6 List Item HTML
<li role="menuitem" class="share__menu-item">
<a href="https:/ /www.facebook.com/sha..."
target="_blank"
rel="nofollow noopener"
tabindex="-1"
class="share__link"
>
<img src="./icons/facebook.svg" alt="Facebook" width="24" height="24">
</a>
</li>
See how an anchor and its image sit inside a share-menu item. The anchor supplies the destination; the image supplies the visible icon. section 11.5.3
Listing 11.7 Styling the links
.share__link:link,
.share__link:visited {
height: 48px;
width: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: solid 1px transparent;
}
Use the link and visited selectors to apply the circular size, centered icon, and transparent border. section 11.5.3
