Hit enter after type your search item

HTML links: Create fancy and animated anchors by jQuery – 4 demos

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 in 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). You may also get the required JS/CSS files of the plug-in by view source the demo pages below.

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

See online demo and code

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:


 

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:


 

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

See online demo and code

The following is the script used in above example:


 

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

See online demo and code

The 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

See online demo and code

The script part is:


 
This div height required for enabling the sticky sidebar