Links

Links are interface elements that generally send the user to a new piece of content.

Links go places. Buttons do things.

~Unknown

Behavior

Links as a class of HTML elements have two states of interactivity:

• Enabled: The link can take focus, be clicked, be tapped, be activated with the keyboard, and generally works the way one expects a button to behave.  By default links are enabled. For the enabled styles, see the Styles section. 
• Disabled: Technically links don't have a status of disabled - which is to say it's not defined in the attributes of the element. On occasion a UX Designer may choose to display plain text instead of an active link for something. We refer to these as disabled links, but they're not coded with a "disabled" status the way that buttons or inputs are. We're still working on an accessible Disabled style. 

Avoid “disabled links” in your designs as much as you possibly can!

Microinteractions

Links have five pseudo-classes describing the state of interaction someone is having with them:

• Link: The user has not yet visited a link. This is the same style as the default style for an <a> tag. When the page loads, if the user's never visited any of the links on the page, this is what the link looks like. We underline links to ensure they're easily seen and because nothing should be identified by color alone.  
• Visited: The user has visited the link in the past according to their history/browser cache. Some sites implement a visited style and some do not. Visited styles are particularly helpful in search results and long documents, but are less helpful for navigation and other interface elements. 
• Hover: The user has hovered a mouse or similar pointer over the link but has not yet interacted with it. The hover state provides an affordance that signals the user they can interact with the link (and that they've successfully targeted the link). 
• Active: The user has activated the link and it's about to go do whatever it does onclick or onsubmit (or onwhatever depending on the input device), but it hasn't done it yet. For example, the user has pressed down the mouse button on a link element but hasn't released the mouse button yet. 
• Focus: The user has put their focus on the link. With links, since tapping or clicking on them usually goes right to the Active class, this is most frequently seen when the user tabs to a link on the keyboard. Note that the link has focus (similar to a text box having focus), but hasn't been activated. 

Note that when assigning pseudo-classes in CSS for links, order matters! The pseudo-classes must be listed in the order above for all of them to be effective. Pseudo-class names are not case-sensitive. 

Additional Resources

• Crafting Link Underlines on Medium by Marcin Wichary on Designing Medium
• Should Links Open in New Windows? by Vitaly Friedman on Smashing Magazine
• An Ultimate Guide to Pseudo-Classes and Pseudo-Elements by Smashing Magazine