CSS Links and Hover Effects

Introduction

Links are fundamental in web design, guiding users through web pages. CSS allows styling links and adding interactive hover effects to enhance user experience.

1. Basic Link Styling

The color property changes link color, and text-decoration removes underlines.

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

2. Link States

CSS provides four pseudo-classes for link styling:

• a:link – Normal, unvisited link.
• a:visited – Link after being clicked.
• a:hover – Link when hovered.
• a:active – Link when clicked.

Example:

a:link {
    color: blue;
}
a:visited {
    color: purple;
}
a:hover {
    color: red;
    text-decoration: underline;
}
a:active {
    color: green;
}

3. Button-like Links

Convert links into buttons using padding, background, and border-radius.

a.button {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
}
a.button:hover {
    background-color: #0056b3;
}

4. Animated Hover Effects

Enhance user experience with transitions.

a {
    color: black;
    transition: color 0.3s ease;
}
a:hover {
    color: orange;
}

5. Underline Effects

Different underline animations on hover.

a {
    position: relative;
    text-decoration: none;
}
a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: red;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}
a:hover::after {
    transform: scaleX(1);
}

Conclusion

Styling links improves navigation and usability. Adding hover effects enhances interactivity, making websites more engaging.