Links in CSS - Style a:link, a:hover, and a:active Like a Pro

Links are the core navigation elements of any website. Styling them well in CSS improves UX and makes navigation clearer and more professional.

If you are looking for link styling in CSS, how to remove the underline, or the difference between a:hover and a:active, this lesson covers it clearly.

What Are Link States in CSS?

The a element has four main states:

• a:link: unvisited link.
• a:visited: visited link.
• a:hover: when the mouse is over the link.
• a:active: while the link is being clicked.

Simple definition: Link states in CSS are different interaction stages of a link based on user behavior.

Basic Link Styling Example

a:link {
    color: #2563eb;
    text-decoration: none;
}

a:visited {
    color: #7c3aed;
}

a:hover {
    color: #dc2626;
    text-decoration: underline;
}

a:active {
    color: #16a34a;
}

What does this code do? Gives each state a different color and shows underline on hover.

Line by line:

• a:link: default link style.
• a:visited: marks visited links.
• a:hover: visual feedback on hover.
• a:active: color while clicking.

Expected result: a clear link that reacts in every state.

Common mistake: defining only one state and ignoring the rest.

The LVHA Rule in CSS (Important Order)

For link states to work properly, follow this order:

:link → :visited → :hover → :active

Why? To avoid conflicts in state priority.

Remove Underline from Links in CSS

One of the most common questions: "How do I remove underline from links?"

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

What does this code do? Hides the underline normally and shows it on hover.

Expected result: a clean modern look while keeping hover clarity.

Common mistake: removing underline without any hover effect or distinct color.

Turn a Link into a Button

Links can be styled as buttons for navigation or calls to action.

a.btn-link {
    display: inline-block;
    background: #2563eb;
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
}

a.btn-link:hover {
    background: #1d4ed8;
}

What does this code do? Turns the link into a simple interactive button.

Expected result: a clear, clickable button-style link.

Common Mistakes with Link Styling in CSS

1) No visual difference between link and text: reduces discoverability.

2) Ignoring visited state: weakens navigation experience.

3) Low-contrast colors: links become hard to see.

FAQ - Common Search Questions

How do I remove underline from a link in CSS?

Use text-decoration: none; on a.

What is the difference between a:hover and a:active?

:hover is when the pointer is over the link, and :active is the moment it is clicked.

Why does visited not work sometimes?

Browsers restrict some properties for visited links for privacy; text color usually works.

What is the correct order of link states?

LVHA: link then visited then hover then active.

How do I turn a link into a button in CSS?

Give it display: inline-block plus padding, background, and border-radius.