Links Colors In HTML

In this article, we’ll take a closer look at the difference in color between these states and how you can style your HTML links accordingly.

We are exploring HTML Links Colors. HTML links provide a way to add color and interest to webpages, making them more visually appealing.

HTML links, also known as hyperlinks, allow users to navigate from one web page to another with a simple click. These links are represented by an HTML object and can be styled to match the design of your website.

One aspect to consider when styling HTML links is their color, which can differ based on their visited, unvisited, or active state.

One web resource can be linked to another with a link, an HTML object. By clicking on it, you can navigate to another page on the web.

The following link appears by default (in all browsers):

  • A link that has not been visited is underlined and blue
  • Purple underlining indicates that a link has been visited
  • Underlined and red links are active

By using CSS, you can change the link state colors:

In this example, unvisited links will appear brown without underlining. An underlined black link indicates that it has been visited. Underlined blue links are active links. Additionally, when hovering over a link (a:hover), it will become underlined and orange:


<!DOCTYPE html> <html> <head> <style> a:link { color: brown; background-color: transparent; text-decoration: none; } a:visited { color: black; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: blue; background-color: transparent; text-decoration: underline; } </style> </head> <body> <a href=""> HTML Examples </a> </body> </html>

Border on Active

The HTML borders on active can be used to generate a variety of visual effects, from subtle and understated to bold and eye-catching. You can experiment with different border styles, colors, and widths to create a unique and engaging look.

It is possible to style a link by adding a border to it using CSS properties. Please see the following example for more information


<!DOCTYPE html> <html> <head> <title>linking pages using absolute URL</title> <style> a:link { text-decoration: none; border: 2px dotted blue; color:red; } </style> </head> <body> <a target="_blank" href="">Google</a> </body> </html>

Border on Hover

HTML borders on hover can also be used to create a variety of visual effects, from simple and understated to bold and eye-catching. Designers can experiment with different border styles, colors, and widths to create a unique and engaging look for their website.

A link can be styled with a border on it through CSS properties. See example below


<!DOCTYPE html> <html> <head> <title>linking pages using absolute URL</title> <style> a:hover { text-decoration: none; border: 1px solid #000000; } </style> </head> <body> <a target="_blank" href="">Google</a> </body> </html>

HTML link buttons can be used in a variety of ways, from navigation menus to call-to-action buttons.

A link can also be styled as a button, by using CSS:

This is a link


<!DOCTYPE html> <html> <head><style> a:link, a:visited { background-color: #f44336; color: grey; padding: 20px 35px; text-align: center; text-decoration: underline; display: inline-block; }a:hover, a:active { background-color: orange; } </style></head> <body><a href="">HTML Examples</a></body> </html>

Example Explanation

The HTML code above defines the working of a hyperlink (<a> tag) that links to a web page located at “”. The link is displayed with a specific style defined in the CSS code in the head section of the HTML file.

The CSS code defines two styles for the hyperlink: one for when the hyperlink is not visited (a:link), and one for when the hyperlink has been visited (a:visited). The background-color property sets the background color of the hyperlink, and the color property sets the color of the text. The padding property adds space between the text and the border of the hyperlink. The text-align property centers the text within the hyperlink, and the text-decoration property underlines the text.

When the user hovers over or clicks on the hyperlink (a:hover and a:active), the background color of the hyperlink changes to orange.

Here is another example of links using CSS:


<!DOCTYPE html> <html> <head> <title>linking pages using absolute URL</title> <style> a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } </style> </head> <body> <h2>Click the link below to redirect to google account page</h2> <a target="_blank" href="">Account Page</a> </body> </html>
To learn more about CSS, go to our CSS Tutorial.

<a>Defines a hyperlink.

For a complete list of all available HTML tags, visit our HTML Tag Reference page.

Link colors can be used not only to enhance the usability and accessibility of websites, but also to create a distinctive visual style. The following are some examples:

  • Using a color that matches the website’s logo or branding: In order to create a cohesive visual identity, you should use link colors that match the logo or branding of the website.
  • Use bold or bright link colors to draw attention: Bright or bold color schemes can be used to draw attention to specific sections or links on a web page. In an e-commerce website, you might use a bright red link color to draw attention to a “Buy Now” button.
  • Use muted or subtle link colors for a minimalist look: You can choose muted or subtle link colors in place of bold link colors for a minimalist and understated look. Clean and uncluttered design aesthetics can be achieved by using this method.
  • Use unique link colors for different sections of a website: Creating a visual hierarchy and leading users through a website can also be accomplished by designing different link colors for different sections. Links to related content might be the color of another link, while links to external websites might be the color of a third link.


HTML link colors improve website usability, accessibility, and visual appeal by improving website usability, accessibility, and visual appeal. You can create a distinctive and engaging experience for website visitors using CSS to define link colors for different states of hyperlinks.

You can use HTML link colors in a variety of ways, from matching the website’s branding to drawing attention to specific links. It is also possible to use different link colors on a website to create a visual hierarchy and direct users to different sections.

Additionally, high-contrast link colors can make websites more accessible to users with visual impairments. A website that uses HTML link colors creatively will not only look great but will also enhance the user experience.

To get notified regarding the latest technical news and updates do subscribe to our Newsletter below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *