An HTML link redirect users to another page or page section.
They can also send email, and perform other functions with JavaScript.
Links can be styled with CSS properties like color, font-family, or background.
Link states, such as, :hover, :active, and :visited can also be styled.
This link has a custom color and background color.
<a href="https://google.com"
target="_blank"
style="color: firebrick; background-color:beige;">
Google.com
</a>
Links can be styled based on their state as follows:
a:link - a normal, unvisited linka:visited - a link the user has visiteda:hover - a link when the user mouses over ita:active - a link the moment it is clickeda:focus - a link that has focus
A link with different styles for each state.
Hover and click/hold the link to see the style changes.
<style>
/* unvisited link */
.stylestate:link {
color: darkblue;
}
/* visited link */
.stylestate:visited {
color: black;
}
/* mouse over link */
.stylestate:hover {
color: orangered;
background-color: antiquewhite;
}
/* selected link */
.stylestate:active {
color: purple;
}
/* focused link */
.stylestate:focus {
color: green;
}
</style>
<a href="https://google.com"
target="_blank"
class="stylestate">
Google.com
</a>
For details on states, see our CSS pseudo-class Tutorial
The text-decoration property adds a decorating line to text.
It accepts these values: underline, overline, line-through, and none.
A link with text-decoration: none will have no underline.
A link without underline.
<a href="https://google.com"
target="_blank"
style="text-decoration: none">
Google.com
</a>
For details on text-decoration, see our CSS text-decoration Property Reference.
The background-color property sets the element background color.
It accepts different color values: color name, hex, rgb, rgba, hsl, and hsla values.
The background color may also be set to transparent value.
A link with a custom background color.
<a href="https://google.com"
target="_blank"
style="background: #d8dcff">Google.com</a>
For details on the background-color, see our CSS background-color Property Reference.
This link appears like a button.
<style>
.advance, .advance:visited {
background-color: #c6d2fe;
display: inline-block;
text-align: center;
border-style: none;
border-radius: 7px;
padding: 20px 35px;
}
.advance:hover, .advance:active {
background-color: #302ea3;
color: white;
}
</style>
<a href="https://google.com"
target="_blank"
class="advance">
Google.com
</a>
Links can be disabled by omitting a value on the href attribute or by leaving it out altogether, or by using JavaScript.
It can also be disabled using the CSS pointer-events property.
Below is a disabled link with none pointer events.
<style>
.not-active {
pointer-events: none;
cursor: default;
text-decoration: none;
color: #302ea3;
}
</style>
<a href="https://google.com"
target="_blank"
class="not-active">
Google.com
</a>
