Links in CSS3

How to set different state Links colors?

Link with color

Color to the link adds color by giving color to the <a> tag which make the link to appear in the given color

 <style>
        a {
            color: green;
        }
    </style>
</head>
<body>
    <h2 style="color:blue">Link with color</h2>
    <p><b><a href="http://www.techFunda.com">Click this link</a></b></p>

</body>

In the above code snippet we have defined the link with color green, we have defined the color of the link a green in the style sheet

output

Link with hover

Link with Hover changes the color of the link when the mouse is placed on the link by using style properties in the a:hover{}

<style>
        a:hover {
            background-color: grey;
            height:30px;
            width:40px;
        }
    </style>
</head>
<body>
    <h2 style="color:blue">Place the Hover on the link</h2>
    <p><b><a href="http://www.techFunda.com">Click this link</a></b></p>
</body>

Hover link

In the above code snippet we have defined the link with Hover, to change the color of the link when the mouse is placed on it

output

Visited link

Visited link changes the color of the link once the link is visited in the page , it changes the color by using the a:visited{}

<style>
        a:visited {
           color:green;
        }
    </style>
</head>
<body>
    <h2 style="color:blue">Visited link</h2>
    <p><b><a href="http://www.techFunda.com">Click this link</a></b></p>
</body>

Visited link

In the above code snippet we have defined the visited link which defines the link is visited we have given visited link with color green

output

Active link

Active link changes the color when the link is clicked, it chages from one color to the another color when the link is clicked

<style>
        a:active {
           color:yellowgreen;
        }
    </style>
</head>
<body>
    <h2 style="color:blue">Active link</h2>
    <p><b><a href="http://www.techFunda.com">Click this link</a></b></p>
</body>

Active link

In the above code snippet we have defined the active link which changes the color of the link when the link is pressed

output

Link with text decoration property

Text decoration property changes the decoration style of the link when the text decoration is given none it adds no decoration to link

 <style>
        a:link {
          text-decoration:none;
        }
        a:hover{
            text-decoration:underline;
            text-decoration-color:red;
        }
    </style>
</head>
<body>
    <h2 style="color:blue">Text decoration</h2>
    <p><b><a href="http://www.techFunda.com">Click this link</a></b></p>
</body>

Text decoration

In the above code snippet we have defined the link with text decoration properties, we have the link as text decoration as none which shows no underline on the link and when the mouse is hover on the link it shows underline and color in red

output

Link Buttons

It adds buttons to the link, it acts the button link

 <style>
        a:link, a:visited {
            background-color: #f44336;
            color: pink;
            padding: 14px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }
        a:hover, a:active {
            color:black;
            background-color: green;
            text-decoration:underline;
        }
    </style>
</head>
<body>
    <p style="color:blue"><i>Link with button</i></p>
    <a href="http://www.techfunda.com" target="_blank">TechFunda</a>
</body>

Link with the button

In the above code snippet we have defined the link with the buttons, we have defined the a tag as link, visited withe style properties and hover, active defines the hover effect after placing the hover on the button link

output

Link with fontsize

It is used to increase the fontsize of the link, it increases the size of the link by using fontsize

<style>
    a:link{
        color:green;
    }
    a:hover{
        font-size:50px;
    }
</style>
</head>
<body>
    <p>Place the Hover to change the link fontsize</p>
    <a href="http://www.techfunda.com">Techfunda</a>
</body>

Link styles

In the above code snippet we have defined the link with the fontsize , we have the link with color as green and hover as fontsize :50px, when the mouse is placed on the link it changes the fontsize to 50px

output

Link with font family

It changes the link font family to give styles to the link

<style>
    a:link{
        color:green;
    }
    a:hover{
       font-family:'Matura MT Script Capitals'; 
    }
</style>
</head>
<body>
    <p>Place the Hover to change the link fontfamily</p>
    <a href="http://www.techfunda.com">Techfunda</a>
</body>

Link font family

In the above code snippet we have defined the link with the fontfamily , we have the link with color as green and hover as fontfamily :Matura MT Script Capitals, when the mouse is placed on the link it changes style of fontfamily

output

Link with border

We can apply the border to the link, by giveing the border value in the link

 <style>
        a:link, a:visited {
            background-color: white;
            color: black;
            border: 5px dotted green;
            padding: 10px 20px;
            display: inline-block;
        }
        a:hover {
            background-color: darkmagenta;
            color: yellow;
        }
    </style>
</head>
<body>
    <p><i>Place mouse on the link to get the border</i></p>
    <a href="http://www.techfunda.com" target="_blank">TechFunda</a>
</body>

Link border

In the above code snippet we have defined the link with the border , we have the link with color as black, border as 5px dotted green and hover as , when the mouse is placed on the link it change the border as color darkmagenta and text color as yellow

output