CSS Links

The Link is used to connect one web page to another web page. It means that the link provides a connection between two web pages.

The CSS property can be styled the links in different ways.

Links States

Links can be styled differently depending on what state they are:

• a:link - a normal, unvisited hyperlinks
• a:visited - a link the user has visited
• a:hover - a link currently has the user mouse pointer hovering over it.
• a:active - a link which the user is just clicked

Example: Styling Links

a:link {color: Blue;} /* This is a normal link */ 
a:visited {color: black;} /* This is a visited link */
a:hover {color: red;} /* This is a hover link */
a:active {color: green;} /* This is a active link */

Click The Link

Important Description

• The color property is used to set the colors of the links.
• The color property will change when you bring a mouse pointer over that link, according to the upper hover property example.

Text Decoration

The text-decoration property is used to remove underlines from link

Example: Text Decoration

a:link {text-decoration: none;} /* underline is not visible */ 
a:visited {text-decoration: none;} /* underline is not visible */
a:hover {text-decoration: underline;} /* underline is visible */
a:active {text-decoration: underline;} /* underline is visible */

Output

Click The Link

How To Create Link Button

Link button is the combination of several CSS properties link background-color, color, text-decoration, padding, text-align, display, etc; then it's look like a buttons.

Example: Link Button

a:link, a:visited {
     text-decoration: none;
     background-color: pink;
     color: blue;
     text-align: center;
     padding: 20px;
     display: inline block;
  }

Output

Link Button