Bootstrap - Colored Links

Hover and Active States

Styling links on hover and active states gives visual feedback to users when they interact with the links. Bootstrap has selectors for styling these states: a:hover for when the user hovers over the link and a:active for when the user clicks on the link.

To style the hover state, use the a:hover selector in your CSS. This selector targets the <a> tag when the user hovers their mouse over the link. Inside the selector, you can change the link's color, background color, text decoration, or any other CSS properties.

Example: Hover State Styling

a:hover {
  color: #ff0000;
  text-decoration: none;
  background-color: #f5f5f5;
}

When the user hovers over a link, the link color changes to red (#ff0000), the underline is removed (text-decoration: none), and the background color changes to a light gray (#f5f5f5).

To style the active state, use the a:active selector. This selector targets the <a> tag when the user clicks on the link. Inside the selector, you can change the link's appearance to show that the link has been clicked.

Example: Active State Styling

a:active {
  color: #00ff00;
  font-weight: bold;
}

When the user clicks on a link, the link color changes to green (#00ff00) and the font weight becomes bold (font-weight: bold).

You can combine hover and active states to create engaging link styles.

Example: Combined Hover and Active States

a {
  color: #007bff;
  text-decoration: none;
}

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

a:active {
  color: #004085;
  text-decoration: underline;
}

The default link color is set to Bootstrap's primary color (#007bff) with no underline. On hover, the link color changes to a darker shade of blue (#0056b3) and an underline appears. When the user clicks the link, the color changes to an even darker shade of blue (#004085) and the underline remains.

Remember to style hover and active states for links that use Bootstrap's text color classes or custom colors to ensure a consistent user experience across all links on your website.

Example: Custom Link States with Bootstrap Classes

a.text-success:hover {
  color: #1e7e34;
}

a.text-success:active {
  color: #155724;
}

By styling hover and active states, you give users clear visual cues when interacting with links. This improves the user experience and makes your website feel more responsive and engaging.