LCWD LogoLCWD
C

CSS Handbook

Clean • Professional

CSS Links

3 minute

CSS Links

Links are a key part of every website. They connect pages, guide users, and make navigation easy. By default, links appear blue and underlined, but with CSS you can style them in creative ways to match your design and improve user experience.

What Are Links?

A link (anchor tag <a>) is a clickable element that takes users to another webpage, section, or external resource. They are the backbone of web navigation.

Example:

<a href="<https://example.com>">Visit Example</a>

CSS Styling Links

CSS allows you to control the color, size, background, borders, spacing, and hover effects of links. Instead of looking plain, links can be turned into engaging UI elements that guide the user effectively.

Styling Links Depending on State

Links have different states that can be styled individually:

  1. a:link → Normal unvisited link
  2. a:visited → Link already clicked
  3. a:hover → When the mouse pointer is over the link
  4. a:active → The moment the link is clicked

Example:

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
  color: orange;
}

CSS Links – Text Decoration

By default, links are underlined. You can remove or customize this underline using text-decoration.

Example:

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline dashed;
}

CSS Links – Background Color

Links don’t need to be just text. Adding background colors makes them stand out more.

Example:

a {
  background-color: yellow;
  color: black;
  padding: 5px;
}

On hover, you can change the background for better interactivity:

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

CSS Link Buttons

You can style links to look like modern buttons, making them perfect for CTAs (Call to Action).

Example:

a.button {
  display: inline-block;
  padding: 10px 20px;
  background: #3498db;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s;
}

a.button:hover {
  background: #2980b9;
}

CSS Image Links

Sometimes, instead of text, you can use images as links. This is useful for clickable logos, banners, or product images.

Example:

<a href="<https://example.com>">
  <img src="logo.png" alt="Example Logo" width="200">
</a>

More Examples of Link Styling

Here are a few creative ideas:

  • Glow effect with text-shadow
a {
  color: white;
  text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000;
}
  • Underline animation on hover
a {
  position: relative;
  text-decoration: none;
}

a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: red;
  left: 0;
  bottom: -2px;
  transform: scaleX(0);
  transition: transform 0.3s;
}

a:hover::after {
  transform: scaleX(1);
}
  • Rounded button-like links
a {
  padding: 8px 16px;
  border: 2px solid #333;
  border-radius: 25px;
}

Default Styles of Links

If you don’t style them with CSS, browsers apply default link styles:

  • Blue and underlined (unvisited link)
  • Purple and underlined (visited link)
  • Red (active/clicked link)

HTML + CSS example that covers CSS Links

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Links and Hover Effects</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    h2 {
      margin-top: 40px;
    }

    /* 1. CSS Links: normal, visited, hover, active */
    a:link {
      color: #3498db;
      text-decoration: none;
    }

    a:visited {
      color: #8e44ad;
    }

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

    a:active {
      color: #27ae60;
    }

    /* 2. Hover Effects & Transitions */
    .button-link {
      display: inline-block;
      margin-top: 20px;
      background: #3498db;
      color: white;
      padding: 10px 20px;
      border-radius: 25px;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .button-link:hover {
      background: #2980b9;
      transform: scale(1.1);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .underline-animate {
      position: relative;
      color: #2c3e50;
      text-decoration: none;
      transition: color 0.3s;
    }

    .underline-animate::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;
      width: 100%;
      height: 2px;
      background: #e74c3c;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.3s ease;
    }

    .underline-animate:hover {
      color: #e74c3c;
    }

    .underline-animate:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }
  </style>
</head>
<body>
  <h1>CSS Links and Hover Effects Example</h1>

  <h2>1. Default Link States</h2>
  <p>
    <a href="#">Normal Link</a> |
    <a href="#">Visited Link</a> |
    <a href="#">Hover Link</a> |
    <a href="#">Active Link</a>
  </p>

  <h2>2. Button-Like Hover Effect</h2>
  <p>
    <a href="#" class="button-link">Hover Me</a>
  </p>

  <h2>3. Animated Underline Effect</h2>
  <p>
    <a href="#" class="underline-animate">Hover for Animated Underline</a>
  </p>
</body>
</html>

Output :

learn code with durgesh images

Article 0 of 0