JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<div class="smallTabsHeader ">
    <a href="">test</a>
</div>

JavaScript

(function($) {
    $.fn.pluginbutton = function(options) {
        myoptions = $.extend({
            left: true
        });
        return this.each(function() {
            var focus = false;
            if (focus === false) {
                $(this).hover(function() {
                    $(this).animate({
                        backgroundPosition: "0 -30px"
                    }, {
                        duration: 0
                    });
                    $(this).removeClass('VBfocus').addClass('VBHover');
                }, function() {
                    $(this).animate({
                        backgroundPosition: "0 0"
                    }, {
                        duration: 0
                    });
                    $(this).removeClass('VBfocus').removeClass('VBHover');
                });
            }
            $(this).mousedown(function() {
                focus = true
                $(this).animate({
                    backgroundPosition: "0 30px"
                }, {
                    duration: 0
                });
                $(this).addClass('VBfocus').removeClass('VBHover');
            }, function() {
                focus = false;
                $(this).animate({
                    backgroundPosition: "0 0"
                }, {
                    duration: 0
                });
                $(this).removeClass('VBfocus').addClass('VBHover');
            });
        });
    }
})(jQuery);


$(document).ready(function() {
    $('.smallTabsHeader a').pluginbutton();
});