← Back to Chapters

CSS Links

? CSS Links

? Key Concepts

  • The <a> tag is used to create hyperlinks.
  • CSS pseudo-classes let you style links in different states.
  • The recommended order is: a:link, a:visited, a:hover, a:active (LVHA).
  • You can use background colors, borders, and padding to make links look like buttons.
  • Good contrast and visible hover effects improve accessibility and usability.

? Basic Syntax

First, create a simple HTML link, then style it with CSS:

? View Basic Link Syntax 
/* Basic HTML link + CSS selector */
<a href="https://www.example.com">Visit Example</a>

a {
  color: blue;
  text-decoration: underline;
}

The selector a targets all links on the page. You can then use pseudo-classes like a:hover to style a link when the mouse hovers over it.

? Link States in CSS

Links have four common interactive states that you can style using CSS pseudo-classes:

  • a:link – normal, unvisited link.
  • a:visited – link that has already been opened.
  • a:hover – when the user moves the mouse over the link.
  • a:active – the moment the link is clicked.
? View Link States Example 
/* Styling all four common link states */
a:link {
  background-color: lightblue;
  color: blue;
}

a:visited {
  background-color: lightgreen;
  color: darkgreen;
}

a:hover {
  background-color: yellow;
  color: orange;
}

a:active {
  background-color: red;
  color: white;
}

? Styling a Link as a Button

You can make a link look like a button by adding padding, background color, border-radius, and removing the underline. Hover and active states can give it a clickable, interactive feel.

? View Button-Style Link 
/* Make a link look like a primary button */
.button-link:link,
.button-link:visited {
  display: inline-block;
  padding: 10px 18px;
  background-color: #2563eb;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
}

.button-link:hover {
  background-color: #1d4ed8;
  transform: scale(1.03);
}

.button-link:active {
  background-color: #1e40af;
  transform: scale(0.98);
}

? Customizing Link Colors

You can use your own color palette by setting different colors for each state. This helps match your website theme and improve visual hierarchy.

? View Custom Color Example 
/* Custom color palette for link states */
a:link {
  color: #007bff;
}

a:visited {
  color: #5c5c5c;
}

a:hover {
  color: #ff6347;
}

a:active {
  color: #003366;
}

? Live Output & Explanation

? Demo Links

Hover and click on the links below to imagine how different states would look:

Visit Example (Button Link)

Normal Text Link

In a real project, the CSS you wrote for .button-link or a:hover would control the visual changes when users hover or click these links.

✅ Make Links Clear and Accessible

  • Always ensure a visible change on a:hover and a:active for better feedback.
  • Maintain sufficient color contrast between link text and background for readability.
  • Do not rely on color alone—use underline or bold text to indicate clickable links.
  • Keep underlines for body text links unless you have a strong visual alternative.
  • Use consistent styling across the site so users easily recognize links.

? Practice Tasks

  1. Create three links: "Home", "About", and "Contact". Style them with different colors for a:link, a:hover, and a:active.
  2. Turn one of the links into a primary button using padding, background color, and border-radius. Add hover and active effects.
  3. Experiment with the LVHA order. Swap the order of pseudo-classes and observe which styles stop working, then fix it.
  4. Add a dark background to your page and adjust link colors to keep them readable in both light and dark themes.