CSS Links

Links (<a> tags) are interactive elements that navigate users to different pages or sections. CSS provides powerful tools to style links in different states, making them visually clear and engaging. By default, browsers style links with an underline and blue or purple color — but CSS allows complete customization.

Link States (Pseudo-classes)

Links can exist in four different states, each targetable with a CSS pseudo-class:

• a:link – A link that has not been visited yet. Appears in blue by default.
• a:visited – A link the user has previously clicked. Appears in purple by default.
• a:hover – A link the mouse cursor is currently over.
• a:active – A link at the exact moment it is being clicked.

a:link    { color: #2980b9; }
a:visited { color: #8e44ad; }
a:hover   { color: #e74c3c; }
a:active  { color: #f39c12; }

It is important to declare these states in the order shown above (LVHA — link, visited, hover, active). If declared in the wrong order, some states may not work correctly due to CSS specificity.

Removing the Default Underline

The default underline on links is removed with text-decoration: none.

a {
    text-decoration: none;
    color: #2c3e50;
}

a:hover {
    text-decoration: underline;  /* Re-add underline on hover for clarity */
}

Styling Links as Buttons

Links are often styled to look like buttons in navigation menus and call-to-action areas.

a.button {
    display: inline-block;
    background-color: #27ae60;
    color: white;
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
}

a.button:hover {
    background-color: #1e8449;
}

Navigation Link Styling

Navigation links are typically displayed as a horizontal row with hover effects.

nav a {
    display: inline-block;
    color: #fff;
    background-color: #2c3e50;
    padding: 10px 20px;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 15px;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #3498db;
}

nav a.active {
    background-color: #1a252f;
}

Cursor Property

By default, links display a hand/pointer cursor when hovered. This can be controlled for other elements too using the cursor property.

button {
    cursor: pointer;  /* Hand cursor for custom button elements */
}

.disabled-link {
    cursor: not-allowed;  /* Shows a blocked cursor */
    color: #aaa;
    text-decoration: none;
    pointer-events: none;
}

Styling External Links Differently

Using the attribute selector, links that open external pages (starting with http) can be styled differently from internal links.

a[href^="http"] {
    color: #8e44ad;
    font-style: italic;
}

a[href^="http"]::after {
    content: " ↗";  /* Adds an arrow symbol after external links */
}

Complete Link Styling Example

/* Base link style */
a {
    color: #2980b9;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

/* Visited links */
a:visited {
    color: #7f8c8d;
}

/* Hover state */
a:hover {
    color: #1abc9c;
    text-decoration: underline;
}

/* Active (click) state */
a:active {
    color: #e67e22;
}

Summary

Links have four states — :link, :visited, :hover, and :active — that should always be declared in LVHA order. text-decoration: none removes the default underline. Links can be fully transformed into button-style components using padding, background color, and border-radius. The cursor property controls the mouse pointer appearance. Using the attribute selector makes it easy to style external links differently for user clarity.