How to Style Links: Hover, Focus, and Active States

  • Blog /
  • How to Style Links: Hover, Focus, and Active States
Blog Featured Image

Styling links is an essential part of web design, as it helps improve both aesthetics and user experience. In this guide, we will explore how to style links using pseudo-classes for their hover, focus, and active states, complete with HTML examples.

Understanding Link States

Links have several states that can be styled using CSS pseudo-classes:

  • Normal State (a): The default appearance of a link.
  • Hover State (a:hover): When the user places their cursor over the link.
  • Focus State (a:focus): When the link is focused, typically via keyboard navigation or assistive devices.
  • Active State (a:active): When the link is being clicked or activated.

Basic HTML Structure

Copied



<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Styled Links</title>


<link rel="stylesheet" href="styles.css">


</head>


<body>


<nav>


     <ul>


         <li><a href="#">Home</a></li>


         <li><a href="#">About</a></li>


         <li><a href="#">Services</a></li>


         <li><a href="#">Contact</a></li>


     </ul>


</nav>


</body>


</html>

CSS Styling

Normal State

The base styles for the link apply to the a selector. Here's an example of styling the normal state:

Normal State

Copied



<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Normal State Example</title>


<style>


     a {


         text-decoration: none;


         color: #007BFF;


         font-weight: bold;


     }


</style>


</head>


<body>


<p><a href="#">This is a normal link</a></p>


</body>


</html>

Hover State

The :hover pseudo-class is triggered when a user hovers over the link with a cursor. Here's an example of styling the hover state:

Hover State

Copied



<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Hover State Example</title>


<style>


     a {


         text-decoration: none;


         color: #007BFF;


         font-weight: bold;


     }




     a:hover {


         color: #0056b3;


         text-decoration: underline;


     }


</style>


</head>


<body>


<p><a href="#">Hover over this link to see the effect</a></p>


</body>


</html>

Focus State

The :focus pseudo-class is triggered when a link gains focus, often via keyboard navigation. Here's an example of styling the focus state:

Focus State

Copied



<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Focus State Example</title>


<style>


     a {


         text-decoration: none;


         color: #007BFF;


         font-weight: bold;


     }




     a:focus {


         outline: 2px solid #ff9900;


         outline-offset: 2px;


     }


</style>


</head>


<body>


<p><a href="#">Tab to this link to see the focus effect</a></p>


</body>


</html>

Active State

The :active pseudo-class is triggered when a link is clicked. Here's an example of styling the active state:

Active State

Copied



<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Active State Example</title>


<style>


     a {


         text-decoration: none;


         color: #007BFF;


         font-weight: bold;


     }




     a:active {


         color: #003366;


         background-color: #f0f8ff;


     }


</style>


</head>


<body>


<p><a href="#">Click this link to see the active effect</a></p>


</body>


</html>

Putting It All Together

Here is the complete CSS file, along with an HTML example that combines all the link states:

Copied



<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Complete Link States Example</title>


<style>


     a {


         text-decoration: none;


         color: #007BFF;


         font-weight: bold;


         transition: color 0.3s ease, background-color 0.3s ease;


     }




     a:hover {


         color: #0056b3;


         text-decoration: underline;


     }




     a:focus {


         outline: 2px solid #ff9900;


         outline-offset: 2px;


     }




     a:active {


         color: #003366;


         background-color: #f0f8ff;


     }


</style>


</head>


<body>


<nav>


     <ul>


         <li><a href="#">Home</a></li>


         <li><a href="#">About</a></li>


         <li><a href="#">Services</a></li>


         <li><a href="#">Contact</a></li>


     </ul>


</nav>


</body>


</html>

Enhancing the User Experience

Keyboard Navigation

The :focus state is crucial for accessibility. Always ensure that focused links are visually distinct to assist users who navigate via keyboard or screen readers.

Transition Effects

Add smooth transitions for a polished look:

Here’s how you can observe transition effects in action:

Copied



<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Transition Example</title>


<style>


     a {


         text-decoration: none;


         color: #007BFF;


         font-weight: bold;


         transition: color 0.3s ease, background-color 0.3s ease;


     }




     a:hover {


         color: #0056b3;


     }


</style>


</head>


<body>


<p><a href="#">Hover over this link to see the transition effect</a></p>


</body>


</html>

Example with Buttons

Links styled as buttons can use these states too, especially in navigation menus or call-to-action elements. For instance, a navigation menu might use button-styled links to ensure consistent design and intuitive interaction. Here's an example:

Copied



<nav>


<a href="#" class="button">Home</a>


<a href="#" class="button">About</a>


<a href="#" class="button">Services</a>


<a href="#" class="button">Contact</a>


</nav>


<a href="#" class="button">Click Me</a>


.button {


display: inline-block;


padding: 10px 20px;


color: #ffffff;


background-color: #007BFF;


border-radius: 5px;


text-align: center;


}




.button:hover {


background-color: #0056b3;


}




.button:focus {


outline: 2px solid #ff9900;


outline-offset: 2px;


}




.button:active {


background-color: #003366;


}

Conclusion

Styling link states is a fundamental yet powerful aspect of web design. Together, the hover, focus, and active states enhance usability by providing visual feedback and improving accessibility for users navigating with different input methods. By thoughtfully crafting the hover, focus, and active states, you can create a more interactive and accessible user experience. Use these examples as a foundation and customize them to match your project’s design language.