This Mootools class replaces links with a hover effect transition on the background image. To do that, it wraps the element in a div ( the .defaultyj_shine class ) that has as background the default position image of your button.
On the link  ( the .yj_shine class ) it uses as background image the hover image.

CSS can be fund in templates/desginlab/css/CHOOSEN_COLOR.css  

Usage: 

Add following code in your template index.php  right before the ending head tag </head> 

Code:

window.addEvent('domready', function(){
new YJ_Shine({container:'center',className: 'yj_shine', classOver: 'yj_shineOver', defaultClass:'defaultyj_shine', duration:1000});

}); 

HTML:

 <a class="yj_shine" href="http://demo.youjoomla.com" title="Joomla Templates Demo::Visit Youjoomla club demos">See Club Demos</a>

CSS:

/*yj_shine can be applied to any tag */

.defaultyj_shine, .yj_shine, .yj_shineOver{
display:block;
position:relative;
float:left;
margin-right:20px;
width:145px;
height:35px;
background:url('/../images/yjshine.jpg');
text-decoration:none;
font-weight:bold;
color:#95B009;
line-height:36px;
text-align:center;
font: bold 12px/35px "Lucida Grande", Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;

}
.yj_shineOver,.yj_shine:hover {
background:url('/../images/yjshine_green.jpg');
color:#000;
}

a.yj_shineOver:focus,a.yj_shineOver:hover{
color:#000;
}

Example:

See Club DemosPurchase TemplatesJoin our club

Yj Shine supported parameters:

• container: the element containing the anchors or buttons replaced (default:document)
• className: the hover class (default:yj_shine)
• defaultClass: the default button class (default:defaultyj_shine)
• classOver: the hover button class (default:yj_shineOver)
• duration: the hover effect duration in ms (default:400)
• transition: the hover effect transition (default:Fx.Transitions.Sine.easeOut)

This Mootools class was created by Youjoomla LLC developer Constantin Boiangiu  for Youjoomla.com customers. You can also visit his blog if you need some Mootools or PHP instructions.