/jsbin.edivah.css

## jsbin.edivah.css
#fade {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: none;
}

## jsbin.edivah.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <button type="button" id='fade' onMouseOver="fadeEffect.init('fade', 0, 90)" onMouseOut="fadeEffect.init('fade', 0)"><p>Hello!</p></button>
</body>
</html>

## jsbin.edivah.js
var fadeEffect=function(){
    return{
        init:function(id, flag, target){
            this.elem = document.getElementById(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function(){fadeEffect.tween();}, 20);
        },
        tween:function(){
            if(this.alpha == this.target){
                clearInterval(this.elem.si);
            }else{
                var value = Math.round(this.alpha + ((this.target - this.alpha) * 0.05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value;
            }
        }
    };
}();
	#fade {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: none;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<button type="button" id='fade' onMouseOver="fadeEffect.init('fade', 0, 90)" onMouseOut="fadeEffect.init('fade', 0)"><p>Hello!</p></button>
	</body>
	</html>
	var fadeEffect=function(){
	return{
	init:function(id, flag, target){
	this.elem = document.getElementById(id);
	clearInterval(this.elem.si);
	this.target = target ? target : flag ? 100 : 0;
	this.flag = flag \|\| -1;
	this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
	this.elem.si = setInterval(function(){fadeEffect.tween();}, 20);
	},
	tween:function(){
	if(this.alpha == this.target){
	clearInterval(this.elem.si);
	}else{
	var value = Math.round(this.alpha + ((this.target - this.alpha) * 0.05)) + (1 * this.flag);
	this.elem.style.opacity = value / 100;
	this.elem.style.filter = 'alpha(opacity=' + value + ')';
	this.alpha = value;
	}
	}
	};
	}();