Creating cool looking HTML links using CSS3 box-shadow property

by Nenad Zivkovic

Updated on December 12, 2014


First, lets create one simple link to work with:

 

<a href="#" class="coolLink"> Cool link </a>

 

We will use coolLink class to target our link with css. Here is the css styling to make our link look better:

 

.coolLink{
    text-decoration: none;
    color: #8360e3;
    box-shadow: 1px 1px 2px 2px;
    padding-left: 4px;
    padding-right: 4px;
}

 

Some stuff that we have used are pretty common, like setting the text decoration to be none and applying some color. We have added the box-shadow property with 4 values. 1st value is the horizontal position of the shadow, 2nd is vertical, 3rd value is blur and 4th is the size of shadow. We have also applied some padding to provide some breathing room for the link text.

But this is not all. We can add custom styling for the hover state of the link:

 

.coolLink:hover{
    color: #d96b6b;
    text-decoration: none;
    box-shadow: 2px 2px 4px 4px;
}

 

As you can see there is nothing special going on here. We are just setting a different color from the one used for normal link display, and we have increased all 4 values of the box-shadow property to get a nice effect when user is hovering over the link.

Here is the whole code of the simple html5 page that we have used for this example, so you can copy and paste it to easily check what we just did:
 

<!DOCTYPE html>
<html>
<head>
    <title>Cool links tutorial</title>

    <style type="text/css">
    .coolLink{
        text-decoration: none;
        color: #8360e3;
        box-shadow: 1px 1px 2px 2px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .coolLink:hover{
        color: #d96b6b;
        text-decoration: none;
        box-shadow: 2px 2px 4px 4px;
    }
    </style>

</head>
<body>

<a href="#" class="coolLink"> Cool link </a> 

</body>
</html>

 

We have added our css styling inside our page, but in real world applications you should write it in external css file.

I hope that this tutorial was useful to you. Usually people do not think about box-shadow property as something that can be used on links to improve their appearance, but as you saw, it can be used and is very effective.


If you want to post a comment, you need to signup and create a profile.