CSS shadow image on hover

Last updated on April 26th, 2016 at 10:24 pm

CSS shadow image on hover, CSS text-shadow property is always handy for displaying hyperlinks with shadows when ever the user moves the mouse pointer over it.

Add the below CSS code to your HTML page

<style>
a:hover {
    color: #349ECB;
    text-decoration: none;
    text-shadow: 10px 10px 10px #ABABAB;
}
a:link {text-decoration: none}
</style>

Below is a HTML code that has hyperlink to a sample test.html file

<a href="test.html">Testing Link That Has A Shadow On Hover</a>

If you save the above code [Both HTML and CSS] to a webpage and open it in a web browser you should be able to see the shadow effect.

Click to rate this tutorial!
[Total: 2 Average: 1]

Leave a Reply

Your email address will not be published. Required fields are marked *