Neema Blog Button

by Koubenec

HTML

<script src="http://www.neemainternational.org/wp-content/uploads/scripts/jQuery1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#blogbuttoncontainer").hover(function() {
        $("#buttonon").stop().animate({
            "width": "600"
        }, 'fast');
    }, function() {
        $("#buttonon").stop().animate({
            "width": "0"
        }, 'fast');   
    });
});
</script>
<script type="text/javascript">// <![CDATA[
(function ($) {
$.fn.vAlign = function() {
    return this.each(function(i){
    var h = $(this).height();
    var oh = $(this).outerHeight();
    var mt = (h + (oh - h)) / 2;    
    $(this).css("margin-top", "-" + mt + "px");    
    $(this).css("top", "50%");
    $(this).css("position", "absolute");    
    });    
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
    return this.each(function(i){
    var w = $(this).width();
    var ow = $(this).outerWidth();    
    var ml = (w + (ow - w)) / 2;    
    $(this).css("margin-left", "-" + ml + "px");
    $(this).css("left", "50%");
    $(this).css("position", "absolute");
    });
};
})(jQuery);
$(document).ready(function() {
    $("#landing").vAlign();
    $("#landing").hAlign();
});
// ]]></script>
<div id="landing">
<div id="blogbuttoncontainer">
<div id="buttonoff"></div>
<div id="buttonon"></div>
</div>
</div>

CSS

#landing {
    width: 600px;
    height: 269px;
}

#blogbuttoncontainer {
    width: 600px;
    height: 79px;
    cursor: pointer;
}

#buttonoff {
    background-image: url('http://neemainternational.org/wp-content/uploads/2012/10/Blog_Button_1_off.png');
    background-attachment: fixed;
    background-repeat: no-repeat;
    width: 600px;
    height: 79px;
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
}

#buttonon {
    background-image: url('http://neemainternational.org/wp-content/uploads/2012/10/Blog_Button_1_on.png');
    background-attachment: fixed;
    background-repeat: no-repeat;
    width: 0px;
    height: 79px;
    z-index: 2;
    position: absolute;
    top: 0px;
    left: 0px;
}