Try It Yourself

Содержание

CSS Links
Styling Links
Example
Example
Text Decoration
Example
Background Color
Example
Link Buttons
Example
More Examples
Example
Example
Example
COLOR PICKER
Report Error
Thank You For Helping Us!
HTML Anchors Link Style Using CSS
Similar Posts
What is SVG in HTML? How to Use SVG in HTML
Get Days Between Two Dates Calculator using JavaScript
Create Registration Successful Message In HTML and CSS
HTML CSS Dropmorphism UI Design Code
Create Background Color Changer Using Javascript
15+ Moving CSS Backgrounds
Leave a Reply Cancel reply
Latest Updates
Category
CodeWithRandom

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 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.

Источник

HTML Anchors Link Style Using CSS

With CSS, of course we can change those properties or style them.

Styling Links With CSS

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

Before we can start styling links we first need to understand the concept of link states.

Link states are different states that a link that can exist in which can be styled using pseudo-classes.

Link (unvisited): pseudo-class is :link; the default state, it isn’t in any other state
Visited: pseudo-class is :visited; a visited link (exists in browser’s history)
Hover: pseudo-class is :hover; a link that is being hovered (mouse over)
Focus: pseudo-class is :focus ; a link when it is being focused e.g. focused by pressing the Tab key
Active: pseudo-class is :active ; a link when it is being activated or clicked on
Link’s Text Decoration

You may want to change or remove a link’s text-decoration which is an underline by default.

We can achieve it by using the text-decoration CSS property.

Change Link’s Background Color

You may want to add a link’s background color.

We can achieve it by using the background-color CSS property.

It’s a good idea to add icons to links. For example, if the link will open in a new tab.

Go to Example.comlaunch.

Note! This demo requires internet connection.

Output Of Icon

Styling Links in CSS Advanced

Here is an example of an advanced way of styling links in CSS: adding borders and padding etc.

Note: In the CSS definition, the :hover pseudo-class should come after the :link and :visited pseudo-classes. And the :active pseudo-class must come after the :hover pseudo-class.

a < outline: none; text-decoration: none; font-family: sans-serif; >a:link < color: black; >a:visited < background: lightgrey; >a:focus < border: 1px solid red; background: lightgrey; >a:hover < border: 1px solid #f8f9f9; background: #173459; color: white; >a:active

Was that link not looking good? Yes, maybe!

So I challenge you to style it yourself and be creative.

You can try experimenting by changing the colors and backgrounds.