How to Style Links in CSS ?

Last Updated : 10 Sep, 2024

Styling links in CSS is one of the fundamentals in web design that helps in creating an interactive and pleasant user experience through navigation. Links are core components for web pages, and using CSS, you can easily come up with the kind of look you want in terms of the overall appearance of the website or the brand.

In this article, we will see different techniques in which links can be styled through descriptions, syntax, and professional code examples.

Prerequisites

These are the approaches to style links in CSS:

Table of Content

Basic Link Styling
Hover Effects
Active Link Styling
Visited Link Styling
Custom Underline Styles
Button-Like Links
Animated Link Styles

1. Basic Link Styling

Basic link styling typically involves making links somewhat more consistent with the rest of your website design through an alteration in link color, font style, and maybe even removing the default underline.

Syntax:

a {  
    color: royalblue; 
    text-decoration: none;
    font-weight: bold; 
}

Example: This above example shows some basic styling of link in CSS having <a> content written with RoyalBlue color.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0">
    <title>Basic Link Styling 
        | Shivam Mudaliar</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .container {
            background-color: white;
            border: 2px solid #dcdcdc;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba
            (0, 0, 0, 0.1);
            text-align: center;
            font-family: 'Arial', sans-serif;
        }

        a {
            color: royalblue;
            text-decoration: none;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        <a href="#">This is a styled 
            link by Shivam Mudaliar</a>
    </div>
</body>

</html>

Output:

2. Hover Effects

Hover effects are visual responses on hovering over a link that is used to build interactivity. The common hover effects are based on the changes in color, addition of underlines, and background changes.

Syntax:

a {  
    color: royalblue;  
    text-decoration: none;  
    font-weight: bold;  transition: 
    color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

a:hover {  
    color: crimson; 
    text-decoration: underline;  
    background-color: lightgray; 
}

Example: This example explains how to apply the hover effects to link in CSS which when hovered changes the color of the text.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0">
    <title>Hover Effects
         | Shivam Mudaliar</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .container {
            background-color: white;
            border: 2px solid #dcdcdc;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba
            (0, 0, 0, 0.1);
            text-align: center;
            font-family: 'Arial', sans-serif;
        }

        a {
            color: royalblue;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease-in-out,
             background-color 0.3s ease-in-out;
        }

        a:hover {
            color: crimson;
            text-decoration: underline;
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div class="container">
        <a href="#">Hover over this link</a>
    </div>
</body>

</html>

Output:

3. Active Link Styling

Active link styling changes the look of a link while it is in the process of being clicked. It provides immediate feedback to the user that a link is being turned on.

Syntax:

a {
    color: royalblue;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

a:active {
    color: seagreen;
    text-decoration: underline;
    background-color: lightyellow;
}

Example: This example explains how to style an active link using CSS which when hovered shows a line under text.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0">
    <title>Active Link Styling 
        | GeeksForGeeks</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .container {
            background-color: white;
            border: 2px solid #dcdcdc;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba
            (0, 0, 0, 0.1);
            text-align: center;
            font-family: 'Arial', sans-serif;
        }

        a {
            color: royalblue;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.2s ease-in-out,
             background-color 0.2s ease-in-out;
        }

        a:active {
            color: seagreen;
            text-decoration: underline;
            background-color: lightyellow;
        }
    </style>
</head>

<body>
    <div class="container">
        <a href="#">Click this link</a>
    </div>
</body>

</html>

Output:

4. Visited Link Styling

Visited link styling is done to provide a different look to links that the user has visited so that the user can differentiate between a visited link and not visited.

Syntax:

a {
  color: royalblue;
  text-decoration: none;
  font-weight: bold;
}

a:visited {
  color: purple;
  text-decoration: none; 
}

Example: This example shows how to apply CSS styling to the visited link as before clicking the text color is RoyalBlue and once the text is clicked its color gets changed.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0">
    <title>Visited Link Styling 
        | Shivam Mudaliar</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .container {
            background-color: white;
            border: 2px solid #dcdcdc;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba
            (0, 0, 0, 0.1);
            text-align: center;
            font-family: 'Arial', sans-serif;
        }

        a {
            color: royalblue;
            text-decoration: none;
            font-weight: bold;
        }

        a:visited {
            color: purple;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <a href="#" id="dynamicLink">
            Visit this link</a>
    </div>

    <script>
        document.addEventListener
        ('DOMContentLoaded', () => {
            const link = 
            document.getElementById('dynamicLink');
            link.href = '#?' + new Date().getTime();
        });
    </script>
</body>

</html>

Output:

5. Custom Underline Styles

Links can be styled more fashionably by employing different underline styles, colors, and positions to create custom underline styles.

Syntax:

a {
  color: royalblue;
  text-decoration: none;
  position: relative;
}

a::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: royalblue;
  position: absolute;
  bottom: -2px;
  left: 0;
}

Example: The example below shows how to apply custom underlining style for link in CSS having text in RoyalBlue color.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0">
    <title>Custom Underline Styles 
        | Shivam Mudaliar</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .container {
            background-color: white;
            border: 2px solid #dcdcdc;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba
            (0, 0, 0, 0.1);
            text-align: center;
            font-family: 'Arial', sans-serif;
        }

        a {
            color: royalblue;
            text-decoration: none;
            position: relative;
        }

        a::after {
            content: '';
            display: block;
            width: 100%;
            height: 2px;
            background: royalblue;
            position: absolute;
            bottom: -2px;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <a href="#">Custom underline 
            style</a>
    </div>
</body>

</html>

Output:

custom-underline — Custom underline Style

6. Button-Like Links

A good way to make links visible and appealing is to style them like buttons. In most cases, this is achieved by adding padding, background color, border radius, and hover effects.

Syntax:

a {
    color: white;
    background-color: royalblue;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    transition: background-color 0.3s ease-in-out;
}

a:hover {
    background-color: crimson;
}

Example: The following example demonstrates how to make links appear as buttons using CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0">
    <title>Button-Like Links 
        | Shivam Mudaliar</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .container {
            background-color: white;
            border: 2px solid #dcdcdc;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba
            (0, 0, 0, 0.1);
            text-align: center;
            font-family: 'Arial', sans-serif;
        }

        a {
            color: white;
            background-color: royalblue;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            display: inline-block;
            transition: 
            background-color 0.3s ease-in-out;
        }

        a:hover {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <a href="#">Button-like link</a>
    </div>
</body>

</html>

Output:

button-like-link — Button-Like Link Styling

7. Animated Link Styles

The Animated link styles are those that make the user's experience a bit more interesting by using dynamic visual effects, such as expanding underlines. These are achieved through the use of transitions and pseudo-elements in CSS.

Syntax:

a {
    color: royalblue;
    text-decoration: none;
    position: relative;
    font-family: 'Arial', sans-serif;
    transition: color 0.3s ease-in-out;
}

a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: crimson;
    transition: width 0.3s;
    position: absolute;
    bottom: -2px;
    left: 0;
}

a:hover {
    color: crimson;
}

a:hover::after {
    width: 100%;
}

Example: This example shows how to use animated type styling for link in CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0">
    <title>Animated Link Styles 
        | Shivam Mudaliar</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .container {
            background-color: white;
            border: 2px solid #dcdcdc;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba
            (0, 0, 0, 0.1);
            text-align: center;
            font-family: 'Arial', sans-serif;
        }

        a {
            color: royalblue;
            text-decoration: none;
            position: relative;
            font-family: 'Arial', sans-serif;
            transition: color 0.3s ease-in-out;
        }

        a::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: crimson;
            transition: width 0.3s;
            position: absolute;
            bottom: -2px;
            left: 0;
        }

        a:hover {
            color: crimson;
        }

        a:hover::after {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <a href="#">Hover to see 
            the animation</a>
    </div>
</body>

</html>

Output:

How to resize list style image in CSS ?

mathivananshivam

Improve

Article Tags :

How to Style Links in CSS ?

Prerequisites

These are the approaches to style links in CSS:

1. Basic Link Styling

2. Hover Effects

3. Active Link Styling

4. Visited Link Styling

5. Custom Underline Styles

6. Button-Like Links

7. Animated Link Styles

Similar Reads

Thank You!

What kind of Experience do you want to share?