HTML links: Create Fancy and Animated Anchors by jQuery

HTML links and jQuery

The simple HTML links are flat, static, and boring. You may add colors to the links by using CSS/CSS3 properties. What about adding some animated effects to those anchor tags of HTML?

While simple links may look good on certain niche websites like financial, political / NEWS, etc. The animated links can be used in funky websites like gaming, mobiles etc. while simple animation can also be used in “serious” niche websites as well.

In this tutorial, I am going to show you examples of a jQuery based plug-in that you may use for creating the HTML links with four types of effects. The plug-in can be downloaded from the Github website here (zip file with plug-in package).

A demo of 3D effect with rolling in HTML links

In this example, a few anchor tags are used for creating the links with rolling 3D effect. Have a look at the demo and code:

jQuery animated links

Code:

<!DOCTYPE html>
<html>
<head>
<link href="css/anchorHoverEffect/anchorHoverEffect.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#contenHolder{float:left;margin-left:50px;width:50%;}


.ulDefault{float:left;margin:0;padding-bottom:50px;padding-left:0;padding-top:50px;text-align:center;width:95%!important;}

.ulDefault li{float:left;list-style:outside none none;text-align:center;width:150px;}

#demo-of-roller3d .ulDefault{
background-color:#C6E3E3;
float:left;
width:90%;
}

</style>

</head>

<body>
<div id="contenHolder">


<div id="demo-of-roller3d">
<h4 style="float: left;">
A demo of animated links</h4>
<ul class="ulDefault">
<li><a href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li>
<li><a href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap</a></li>
<li><a href="https://www.jquery-az.com/html-tutorials/">HTML</a></li>
<li><a href="https://www.jquery-az.com/python-tutorials/">Python</a></li>
</ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/anchorHoverEffect/anchorHoverEffect.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function () {

            $("#demo-of-roller3d a").anchorHoverEffect({ type: "roller3d" });

        }); 
    
    </script>


</body>
</html>

In order to set up this plug-in to be used for your project, simply download the package and get the JS and CSS files. Place those at your desired location and refer the CSS file in the <head> section and JS file just above the </body> tag:

The CSS file:

<link href=”css/anchorHoverEffect/anchorHoverEffect.css” rel=”stylesheet” type=”text/css”/>

The JS files of jQuery and plug-in:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”> </script>

<script src=”js/anchorHoverEffect/anchorHoverEffect.js” type=”text/javascript”></script>

In the markup section, a few links are created with certain CSS classes that are also placed in the <style> section:

<div id="demo-of-roller3d">

<h4 style="float: left;">

A demo of animated links</h4>

<ul class="ulDefault">

<li><a href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li>

<li><a href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap</a></li>

<li><a href="https://www.jquery-az.com/html-tutorials/">HTML</a></li>

<li><a href="https://www.jquery-az.com/python-tutorials/">Python</a></li>

</ul>

</div>

Finally, the jQuery code for initiating the animated links. There you may specify different values for the type option in the anchorHoverEffect method. For this demo, the type: “roller3d” is used:

<script type="text/javascript">

        $(document).ready(function () {

            $("#demo-of-roller3d a").anchorHoverEffect({ type: "roller3d" });
        });
</script>

The following examples show different values available as using this anchor animation plug-in.

A demo of flip effect links

In this demo, the type option’s value is set as “flip” for link effect. See the code and output by clicking the links below:

HTML link flip

The following is the script used in the above example:

<script type="text/javascript">

        $(document).ready(function () {

            $("#demo-of-flip a").anchorHoverEffect({ type: "flip" });
        });
</script>

Creating link of HTML with brackets effect

In this example, the links are created with brackets effect. As you bring the mouse over any link, the square brackets will appear with an animation. Have a look:

HTML link brackets

The script:

<script type="text/javascript">

        $(document).ready(function () {

            $("#demo-of-brackets a").anchorHoverEffect({ type: "brackets" });

        });
</script>

An example of links with bottom border with animation

Use the type: “borderBottom” option in the jQuery section for creating links with a border that comes with an animation effect to the specified links:

HTML link Bottom line

The script part is:

<script type="text/javascript">

        $(document).ready(function () {
            $("#demo-of-borderBottom a").anchorHoverEffect({ type: "borderBottom" });

        });
</script>