How to style links in CSS

Overview

A website link is a crucial means to help users navigate. In CSS, we can design a link that makes it interactive and easier to find for a user.

To begin, we can create four states of a link in different ways. In the following illustration, let's look at the four states that we can design in CSS.

For each of the states above, let's explore the link's syntax and what it does.

Syntax

• Active: In this state, when the user clicks on the link, its styling gets implemented. In the following example, we add color to the button by using a:active in the CSS file. When the user clicks on the button, the changes are reflected.

• Visited: In this state, the style will be reflected if the user has already viewed the link. In the following example, we use a:visited in the CSS file to add color to the button.

Note: To see the visited state styling, we have to visit the link first.

• Hover: In this state, the style is applied when the user places the pointer on the link. In the following example, we use a:hover in the CSS file to add color to the button. When the user moves the pointer over the button, the color changes.

• Link: In this state, the style is applied if the user does not click on the link. In the following example, we use a:link in the CSS file to add color to the button. If the button is not pressed, the color will be reflected.

Example

Explanation

In this example, we pass a link https://www.educative.io/unlimited to a button and design all of the four states of the button to show different colors for each state.