Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

CSS Link HTML Styling: An Easy and Simple Guide

Links are an essential and integral component of any website, as they provide a seamless way for visitors to navigate between different pages or explore various sections within a single page. These hyperlinks, often highlighted with underlines or different colors, serve as a fundamental building block for the overall structure and user experience of a website. The CSS link HTML is an important part!

By connecting related content and providing easy access to relevant information, links help create a cohesive and user-friendly environment that encourages visitors to explore further and engage with the site’s content.

In this article, we’ll explore the various states of CSS link – HTML and how to use CSS to style them, allowing visitors to distinguish between different types of links, such as previously visited links or currently active links.

Adding Text Color to HTML Links

By default, links are visually distinguished from regular text on a webpage by being blue and underlined, as demonstrated below. This traditional styling helps users identify hyperlinks within the content and navigate through the site more easily.

However, as a web designer, you may want to customize the appearance of these links to better align with your site’s design and improve the overall user experience.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

However, we can add a custom style to links using CSS color properties like below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a {
        color: red;
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

The above CSS style update will make the link color red as shown below.

You can go ahead and style the link further with font size, font family, text alignment, etc.

Give Purecode a try today to instantly generate thousands of customizable, styled HTML, CSS, and JavaScript components to accelerate your web development projects.

Removing the default underline in Links

To remove the default underline applied to links by the browser, we can set the text-decoration to none, as shown in the following code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a {
        color: red;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

By modifying the text-decoration property, we can control the style, color, and thickness of the underline, or even remove it entirely if desired as shown below.

HTML Link Underline Styles

We can apply a wide range of underline styles to links by utilizing the CSS text-decoration property. This versatile property allows us to customize the appearance of hyperlinks, making them more visually appealing and in line with the overall design of our website.

Dotted Styles

We can give the link underlined a dotted style by setting the text-decoration-style to dotted, which will produce a dotted underline as demonstrated below:

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a {
        text-decoration: underline;
        text-decoration-style: dotted;
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

Dashed Style

The dashed style is similar to the dotted style but with thicker lines. You can achieve this by setting the text-decoration-style to dashed, as shown below:

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a {
        text-decoration: underline;
        text-decoration-style: dashed;
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

Wavy Style

The wavy style creates a water wave appearance. You can achieve this by setting the text-decoration-style to wavy, with the output as shown below:

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a {
        text-decoration: underline;
        text-decoration-style: wavy;
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

Adding Background Color to HTML Links

To add background colors to links, we can make use of the CSS background property, and specify our desired color.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a {
        color: red;
        text-decoration: none;
        background-color: black;
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

The background-color property will apply a background of black to the link as shown below:

Styling a Link as a Button in CSS

To style a link as a button, we can combine the background color, padding, and border-radius CSS properties, as demonstrated below, to link resemble a button.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a {
        color: white;
        text-decoration: none;
        background-color: black;
        padding: 3px 10px;
        border-radius: 12px;
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

The above CSS code will produce the following output.

What are HTML Link States?

HTML link states represent the various conditions of links, such as default, visited, hover, active, and focus. These states allow us to customize and enhance the user experience by indicating the current status of the link.

Link Default State

This is the default state of a link, it can also be referred to as an unvisited link, which is usually blue in color and underlined. You can customize it according to your preferences to match your design system.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

Visited Links State

The link visited state enables us to show that the user has previously clicked on a link as demonstrated below.

To accomplish this, we apply the visited state styling using the :visited pseudo-selector.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a:visited {
        color: hotpink;
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

Hover Links State

The link hover state is one of the most commonly used states, where the link is underlined when the mouse hovers over it, as demonstrated below:

To accomplish this, we apply the hover state style to the :hover pseudo-selector.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a {
        text-decoration: none;
        color: blue;
      }
      a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

Active Links State

The active state of a link occurs when the link is being clicked, as demonstrated below:

To accomplish this, we apply the active state style to the :active pseudo-selector.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a {
        color: blue;
      }
      a:active {
        color: black;
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

Focus Links State

The focus state occurs when the link is being highlighted using the tab key on the keyboard or any screen accessibility tools, as demonstrated below.

To accomplish this, we apply the focus state style to the :focus pseudo-selector.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a {
        color: blue;
        text-decoration: none;
      }
      a:focus {
        color: red;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

Creative Link Styling

Below are some creative link stylings and animations, along with their source code. Feel free to use them in your project 😉.

Background animation on Hover

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a {
        box-shadow: inset 0 0 0 0 black;
        color: black;
        margin: 0 -0.25rem;
        padding: 0 0.25rem;
        transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
      }
      a:hover {
        box-shadow: inset 200px 0 0 0 black;
        color: white;
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

Link Zoom Out on Hover

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a {
        color: black;
        transition: all 0.3s ease;
        display: inline-block;
      }
      a:hover {
        background: #000;
        color: #fff;
        transform: scale(1.1);
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

Link Shadow Effect on Hover

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My website</title>
    <style>
      a {
        color: blue;
        text-decoration: none;
      }

      a:hover {
        color: green;
        text-shadow: 2px 2px 5px green;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    You're welcome to my website 👋🏽. You can also
    <a href="http://youtube.com/@unclebigbay">visit my YouTube channel</a> 📺
  </body>
</html>

Below is a comprehensive table outlining various HTML link states and their corresponding descriptions:

StateExplanationCommon Visual Cues
linkThe default, unvisited state of a link.Usually underlined and blue in color.
visitedA link that the user has already visited.Often a different color (e.g., purple) to indicate it’s been viewed.
hoverThe state when the user’s mouse pointer is hovering over the link.Often changes color or underlines to highlight interactivity.
activeThe state when the link is being actively clicked or tapped.May briefly change color or appearance to signal activation.
focusThe state when the link has keyboard focus.Often has a visible outline or border to enhance accessibility.

Additional states (not universally supported):

StateExplanation
targetThe state of a link that is the target of another link.
disabledA link that is disabled and cannot be clicked.

If you’re interested in a hands-on practical guide to styling links, I recommend checking out the YouTube video tutorial below.

Wrapping up HTML Link Styling with CSS

In conclusion, HTML link styling with CSS offers a wide variety of options to enhance user experience on a website.

In this article, we’ve explored various methods of styling links, including altering link colors based on their state, removing and customizing link underlines, adding background colors, and creating button-like links.

Additionally, understanding link states and how to style them provides valuable insights into user interaction and accessibility. Lastly, by adding creative link styling and animations, you can further engage your audience and improve your site’s aesthetics. Consider using tools like Purecode to expedite the development process and generate customizable, styled HTML, CSS, and JavaScript components.

Checkout Purecode!

I recommend you try out Purecode, an AI tool that can generate custom HTML, CSS, and JavaScript components. Here are some of its features:

  • It uses an AI assistant to generate thousands of responsive pre-made components for you.
  • The components come with default styling using CSS, Tailwind CSS, or your own custom styles so you can match your brand’s design.
  • You can easily customize the generated components to suit your specific needs – change colors, spacing, paddings, margins, etc.
  • It generates both the HTML markup and CSS styles for the components, saving you development time.
  • It also includes some JavaScript functionality within the components to make them interactive.
Ayodele Samuel Adebayo

Ayodele Samuel Adebayo