Anchor Hover Effect [jQuery plugin]

anchorHoverEffect – jQuery Plugin for CSS3 Animated Anchor Links

anchorHoverEffect is a tiny jQuery plugin that applies fancy CSS3 animations to your anchor links on mouse hover i.e makes you anchor tag fancy and animated. Works on all modern browser which support CSS3 transforms and transitions. Currently, it provides four different types of effects .i.e Roller 3D effect, Flip Effect, Bracket Effect, and BorderBottom effect.

GitHub : Download files from Github.


Look at the demo section on to see anchorHoverEffect in action.

How to use it:

First, you need to include anchorHoverEffect.css file in your head tag. Then load anchorHoverEffect.js script after loading jQuery library.

<link href="../anchorHoverEffect.css" rel="stylesheet" type="text/css" />
<script src="//"></script>
<script src="../anchorHoverEffect.js"></script>

Add Html anchor tags whom you want to make it fancy and animated on hover.

<ul class="ulDefault">
 <li><a href="#">jQuery</a></li>
 <li><a href="#">Angular Js</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#"> MVC</a></li>

Call the function on anchor tag you just added.

$(".ulDefault a").anchorHoverEffect();

Default plugin settings

$(".ulDefault a").anchorHoverEffect({type:"roller3d"});


Currently, there are four different types of effect.

roller3d : is set as default, and it makes anchor tag as 3d rolling effect
brackets : It added left right rectangle brackets at start and end of anchor text with animation.
flip : It flips the anchor text.
borderBottom : It adds border bottom with animation.


$(".ulDefault a").anchorHoverEffect({type: 'brackets'});
$(".ulDefault a").anchorHoverEffect({type: 'flip'});
$(".ulDefault a").anchorHoverEffect({type: 'borderBottom'});

License: MIT