Html text link color hover

CSS Links

With CSS, links can be styled in many different ways.

Styling Links

Links can be styled with any CSS property (e.g. color , font-family , background , etc.).

Example

In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link — a normal, unvisited link
• a:visited — a link the user has visited
• a:hover — a link when the user mouses over it
• a:active — a link the moment it is clicked

Example

/* unvisited link */
a:link color: red;
>

/* visited link */
a:visited color: green;
>

/* mouse over link */
a:hover color: hotpink;
>

/* selected link */
a:active color: blue;
>

When setting the style for several link states, there are some order rules:

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example

a:visited text-decoration: none;
>

a:hover text-decoration: underline;
>

a:active text-decoration: underline;
>

Background Color

The background-color property can be used to specify a background color for links:

Example

a:link <
background-color: yellow;
>

a:visited background-color: cyan;
>

a:hover background-color: lightgreen;
>

a:active background-color: hotpink;
>

Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

Example

a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: red;
>

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

Example

Another example of how to create link boxes/buttons:

a:link, a:visited <
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: green;
color: white;
>

Example

This example demonstrates the different types of cursors (can be useful for links):

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to Change Link Colors with CSS

There are three ways of changing the link color: inline, internal and external.

Inline method

Add the style attribute directly to the hyperlink code and specify the color property through the style attribute, then give a color value to it.

Example of changing a link color with the inline method:

html> html> head> title>Title of the document title> head> body> p>Visit our a href="https://www.w3docs.com/" style="color: #8ebf42">website a>. p> body> html>

Result

Internal method

Example of changing the link color with the internal method:

html> html> head> title>Title of the document title> style> a < color: #8ebf42; > style> head> body> p>Visit our a href="https://www.w3docs.com/">website a>. p> body> html>

There are 4 link states that links can be styled depending on what state they are in:

• a:link — a normal, unvisited link,
• a:visited — a link the user has visited,
• a:hover — a link when a user mouses over it,
• a:active — the moment a link is clicked.

When setting the style for several link states, follow these rules:

Example of using different link states:

html> html> head> title>Title of the document title> style> /* unvisited link */ a:link < color: #ccc; > /* visited link */ a:visited < color: #095484; > /* mouse over link */ a:hover < color: #8ebf42; > /* selected link */ a:active < color: #800000; > style> head> body> p>Visit our a href="https://www.w3docs.com/">website a>. p> body> html>

How to change the colors of the hyperlink underline and anchor text

To change the underline color, first of all, you need to remove it with the «none» value of the text-decoration property and set the «none» value, then add the border-bottom property with the width (in this case, used as a hyperlink underline width) and border-style (solid, dotted, or dashed) properties. For the anchor text color, use the color property.

Example of changing a hyperlink underline and anchor text color:

html> html> head> title>Title of the document title> style> a < text-decoration: none; > a:link < color: #000; border-bottom: 1px solid #ff0000; > a:visited < color: #e600e6; border-bottom: 1px solid #b3b3b3; > a:hover < color: #2d8653; border-bottom: 1px solid #000099; > style> head> body> p>Visit our a href="https://www.w3docs.com/">website a>. p> body> html>

Example of styling links with the mentioned methods:

html> html> head> title>Title of the document title> style> a.one:link < color: #ccc; > a.one:visited < color: #095484; > a.one:hover < color: #8ebf42; > a.two:link < color: #ccc; > a.two:visited < color: #095484; > a.two:hover < font-size: 150%; > a.three:link < color: #ccc; > a.three:visited < color: #095484; > a.three:hover < background: #8ebf42; > a.four:link < color: #ccc; > a.four:visited < color: #095484; > a.four:hover < font-family: monospace; > a.five:link < color: #095484; text-decoration: none; > a.five:visited < color: #095484; text-decoration: none; > a.five:hover < text-decoration: overline underline; > style> head> body> p>Mouse over the links and watch how they will be changed: p> p> a class="one" href="#">This link changes color a> p> p> a class="two" href="#">This link changes font-size a> p> p> a class="three" href="#">This link changes background-color a> p> p> a class="four" href="#">This link changes font-family a> p> p> a class="five" href="#">This link changes text-decoration a> p> body> html>

Now, we’ll demonstrate another example, where we use the color property with its «inherit» value. This will make the element take the color of its parent.

Example of changing the link color with the «inherit» value of the color property:

html> html> head> title>Title of the document title> style> p < color: green; > p a < color: inherit; > style> head> body> h1>Example h1> a href="https://www.w3docs.com/">W3docs.com a> p>Visit our a href="https://www.w3docs.com/">W3docs.com a> website. p> body> html>

Example of styling links with the CSS text-decoration-color property:

html> html> head> title>Title of the document title> style> a < text-decoration-color: grey; > a:link < color: #777777; > a:hover < color: #2d8653; > style> head> body> p>Visit our a href="https://www.w3docs.com/">website a>. p> body> html>

External method

Using external stylesheets you can take control of all the hyperlinks of your site. With external stylesheets, many attractive hyperlink effects can be created to develop the look of your website.

With the external method, you’ll link your web pages to an external .css file that can be created by any text editor in your device. This is a more efficient method, especially when you need to style a large website. You can change your whole site at once by editing one .css file.

Источник

4 Ways to Animate the Color of a Text Link on Hover

Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors. There are four different techniques we can use to do this. Let’s look at those while being mindful of important things, like accessibility, performance, and browser support in mind. Let’s get started!

Technique 1: Using background-clip: text

At the time of writing, the background-clip: text property is an experimental feature and is not supported in Internet Explorer 11 and below. This technique involves creating knockout text with a hard stop gradient. The markup consists of a single HTML link ( ) element to create a hyperlink:

We can start adding styles to the hyperlink. Using overflow: hidden will clip any content outside of the hyperlink during the hover transition:

We will need to use a linear gradient with a hard stop at 50% to the starting color we want the link to be as well as the color that it will change to:

Let’s use background-clip to clip the gradient and the text value to display the text. We will also use the background-size and background-position properties to have the starting color appear:

Finally, let’s add the transition CSS property and :hover CSS pseudo-class to the hyperlink. To have the link fill from left to right on hover, use the background-position property:

While this technique does achieve the hover effect, Safari and Chrome will clip text decorations and shadows, meaning they won’t be displayed. Applying text styles, such as an underline, with the text-decoration CSS property will not work. Perhaps consider using other approaches when creating underlines.

Technique 2: Using width/height

The CSS is similar to the previous technique minus the background CSS properties. The text-decoration property will work here:

To keep the text from wrapping to the next line, white-space: nowrap will be applied. To change the link fill color, set the value for the color CSS property using the ::before pseudo-element and having the width start at 0:

While this technique does the trick, using the width or height properties will not produce a performant CSS transition. It is best to use either the transform or opacity properties to achieve a smooth, 60fps transition. Using the text-decoration CSS property can allow for different underline styles to appear in the CSS transition. I created a demo showcasing this using the next technique: the clip-path CSS property.

Technique 3: Using clip-path

For this technique, we will be using the clip-path CSS property with a polygon shape. The polygon will have four vertices, with two of them expanding to the right on hover: The markup is the same as the previous technique. We will use a ::before pseudo-element again, but the CSS is different:

Unlike the previous techniques, text-decoration: underline must be declared to the ::before pseudo-element for the color to fill the underline on hover. Now let’s look into the CSS for the clip-path technique:

clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);

• 0 0 = top left
• 0 0 = top right
• 100% 0 = bottom right
• 0 100% = bottom left

The direction of the fill effect can be changed by modifying the coordinates. Now that we have an idea for the coordinates, we can make the polygon expand to the right on hover:

This technique works pretty well, but note that support for the clip-path property varies between browsers. Creating a CSS transition with clip-path is a better alternative than using the width / height technique; however, it does affect the browser paint.

Technique 4: Using transform

The markup for this technique uses a masking method with a element. Since we will be using duplicated content in a separate element, we will use aria-hidden=»true» to improve accessibility — that will hide it from screen readers so the content isn’t read twice:

The CSS for the element contains a transition that will be starting from the left:

Next, we need to get the to slide the right like this:

To do this, we will use the translateX() CSS function and set it to 0:

Then, we will use the ::before pseudo-element for the , again using the data-content attribute we did before. We’ll set the position by translating it 100% along the x-axis.

Much like the element, the position of the ::before pseudo-element will also be set to translateX(0) :

While this technique is the the most cross-browser compatible of the bunch, it requires more markup and CSS to get there. That said, using the transform CSS property is great for performance as it does not trigger repaints and thus produces smooth, 60fps CSS transitions.

We just looked at four different techniques to achieve the same effect. Although each has its pros and cons, you can see that it’s totally possible to slide in a color change on text. It’s a neat little effect that makes links feel a little more interactive.

Источник