A person can style the links using CSS.
Links can be designed depending on their states:
- a: link– normal, unvisited link by the user
- a: visited– link by the user
- a: hover– a link which changes it color when the user takes the mouse over it.
- a: active– a link which shows its color when it is just clicked.
Try the following source code using links.
Here is a link
You can even try different CSS properties in these links.
The Four Link States You Need to Style
Links in CSS have four distinct states. Most beginners style only one or two and end up with a site that feels unfinished. Here are all four, and what each one does:
- a:link — a normal, unvisited link.
- a:visited — a link the user has already clicked on.
- a:hover — the link when the mouse is hovering over it.
- a:active — the link at the exact moment of being clicked.
Important rule: these selectors must be in this exact order in your stylesheet. If you put :hover before :link and :visited, the hover effect will not show. CSS memorizes this order as the LVHA rule (Link, Visited, Hover, Active).
Basic CSS Link Styling Example
Here is the simplest working example you can paste into any HTML page. Save the code below as index.html and open it in a browser:
<!DOCTYPE html>
<html>
<head>
<style>
a:link { color: #1F3A5F; text-decoration: none; }
a:visited { color: #6B4FA1; }
a:hover { color: #C9A961; text-decoration: underline; }
a:active { color: #D32F2F; }
</style>
</head>
<body>
<p>Try clicking this link: <a href="https://example.com">Example Site</a></p>
</body>
</html>The link starts dark blue, turns purple after you visit it, goes gold on hover with an underline, and flashes red the instant you click. That single 4-line CSS block covers every link state your visitors will ever experience.
Styling Links to Look Like Buttons
A common request: make a link look like a button without using a <button> element. CSS handles this cleanly:
.btn-link {
display: inline-block;
padding: 10px 20px;
background-color: #1F3A5F;
color: white;
text-decoration: none;
border-radius: 4px;
font-weight: 600;
transition: background-color 0.2s;
}
.btn-link:hover {
background-color: #C9A961;
}
.btn-link:active {
transform: translateY(1px);
}Apply it with <a href="..." class="btn-link">Click Me</a>. The display: inline-block is what lets the padding actually create a clickable box around the text. The transition property makes the hover color change smooth instead of snap-instant.
Removing the Default Underline
By default browsers underline all links. To remove the underline:
a {
text-decoration: none;
}Watch out though. Underlines are a strong visual cue that something is clickable. If you remove them globally, make sure your links still look different from regular text. Use a distinct color, a hover effect, or a bottom border so users still understand they can click.
Adding a Fancy Underline Effect on Hover
Modern sites often use a custom underline that grows from left to right on hover. Here is the trick:
.fancy-link {
position: relative;
color: #1F3A5F;
text-decoration: none;
}
.fancy-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: #C9A961;
transition: width 0.3s ease-out;
}
.fancy-link:hover::after {
width: 100%;
}The ::after pseudo-element creates an invisible gold bar at the bottom of the link, starting at zero width. On hover, the width animates to 100%. The result is a smooth left-to-right underline that costs zero JavaScript.
Accessibility: Don’t Forget the Focus State
Keyboard users navigate with the Tab key. When a link gets focus, the browser shows a focus ring (usually a thin outline). Many designers remove this ring because it looks ugly, but that breaks accessibility. The fix is to KEEP the focus indicator but style it to match your design:
a:focus {
outline: 2px solid #C9A961;
outline-offset: 3px;
}
/* Modern alternative — only shows for keyboard users */
a:focus-visible {
outline: 2px solid #C9A961;
outline-offset: 3px;
}The newer :focus-visible pseudo-class is even better. It shows the focus ring only when the user is navigating with a keyboard, never when they click with a mouse. Best of both worlds.
Common CSS Link Mistakes
- Wrong selector order. If
:hovercomes before:linkin your CSS, the hover state will never appear. Remember LVHA: Link, Visited, Hover, Active. - Removing the underline without a replacement. Visitors lose the visual signal that text is clickable. Always replace it with a color, border, or hover effect.
- Removing the focus outline. Keyboard users get stranded with no idea what is focused. Use
:focus-visibleto keep it for keyboards, hide it for mice. - Color contrast too low. Light grey link text on a white background fails WCAG accessibility. Aim for at least 4.5:1 contrast ratio for body text.
- Using
a:visitedwith too many CSS properties. For privacy reasons, browsers only allow a:visited to change a small set of properties (mainly color). Trying to changebackground-imageon visited links is silently ignored. - Forgetting that all links inherit from
a. If you seta { color: red }and then.nav a { color: blue }, the blue wins inside .nav. CSS specificity matters.
Frequently Asked Questions
How do I style a link in CSS?
Use the a selector for all links, plus the four pseudo-class selectors for different states: a:link for unvisited, a:visited for already-clicked, a:hover for mouse-over, and a:active for the click moment. Set color, text-decoration, and any other properties you want for each state.
Why doesn’t my CSS hover effect work on links?
The most common cause is selector order. CSS evaluates link selectors in the order you wrote them, so if you put :hover BEFORE :link or :visited in your stylesheet, the later selectors override the hover. Always write them in LVHA order: Link, Visited, Hover, Active.
How do I remove the underline from a link?
Add text-decoration: none to the link selector. For example: a { text-decoration: none; } removes underlines from all links on the page. To remove only on hover, target a:hover { text-decoration: none; }. Just make sure your links still have some visual cue that they are clickable, like a different color or a hover effect.
How do I make a CSS link look like a button?
Add display: inline-block to the link so it can accept padding, then style with padding, background-color, border-radius, and remove text-decoration. A 5-line CSS rule turns any link into a button without changing the HTML. Add a hover state to change the background color on mouse-over.
What is the difference between :link and a in CSS?
The a selector matches ALL links regardless of state. a:link matches only UNVISITED links. The practical difference: rules set on a apply everywhere unless overridden, while a:link rules only apply before the user clicks. For most styling, you can use a for shared properties and the pseudo-classes for state-specific changes.