Style Link using CSS

With the help of CSS, we can convert the look and feel of a normal link into a link that looks interactive and elegant.

Note - Before starting this article, on styling link using CSS, a recommended article is a:link, a:visited, a:hover, a:active. If you already do understand about these four link selector pseudo-classes, then forget this article, and continue the tutorial on styling link.

How to Remove Underline from a Link in CSS

The underline from a link can be removed using following CSS code:

a{text-decoration: none;}

For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      a{text-decoration: none;}
   </style>
</head>
<body>

   <a href="/index.htm">codescracker.com</a>
   
</body>
</html>
Output

Change Link Color using CSS

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      a{color: red;}
   </style>
</head>
<body>

   <a href="/index.htm">codescracker.com</a>
   
</body>
</html>
Output

Change Background and Text Color of a Link using CSS

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      a{background-color: purple; color: whitesmoke;}
   </style>
</head>
<body>

   <a href="/index.htm">codescracker.com</a>
   
</body>
</html>
Output

CSS Style Links in Multiple Ways

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      a{text-decoration: none;}

      a.one:hover{color: red;}
      a.two:hover{font-size: xx-large;}
      a.three:link{font-size: x-large;}
      a.three:hover{color: purple;}
      a.four:link{font-size: x-large;}
      a.four:hover{color: green; font-family:'Courier New', Courier, monospace;}
      a.five:hover{text-decoration: underline; color: yellowgreen;}
   </style>
</head>
<body>

   <p>Hover <a href="/index.htm" class="one">codescracker</a> to see the change</p>
   <p>Hover <a href="/index.htm" class="two">codescracker</a> to see the change</p>
   <p>Hover <a href="/index.htm" class="three">codescracker</a> to see the change</p>
   <p>Hover <a href="/index.htm" class="four">codescracker</a> to see the change</p>
   <p>Hover <a href="/index.htm" class="five">codescracker</a> to see the change</p>
   
</body>
</html>
Output

Hover codescracker to see the change

Hover codescracker to see the change

Hover codescracker to see the change

Hover codescracker to see the change

Hover codescracker to see the change

Style Link as Button using CSS

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      a{text-decoration: none; background-color: maroon; color: white;
         padding: 12px; font-size: larger;}
      a:hover{background-color: green;}
   </style>
</head>
<body>

   <a href="/index.htm">codescracker.com</a>
   
</body>
</html>
Output

CSS Link Style Example

Let's create one last example of styling link using CSS, to complete this article:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      a{text-decoration: none; color: green; border: 1px solid green;
         padding: 12px;}
      a:hover{background-color: green; color: white;}
   </style>
</head>
<body>

   <p><a href="#">Hover Me</a></p>
   
</body>
</html>
Output

Above examples are just demo, to show how a link can be styled using CSS. You can use multiple CSS properties to style the link based on your requirement.

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!