JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<div class="mtButton">
    <a href="#" class="edit">Edit</a>
    <a href="#" class="delete">Delete</a>
    <a href="#" class="save">Save</a>
</div>

CSS

.mtButton {
    position: relative;
    overflow: hidden;
    background: #7aad29;
    width: 150px;
}
.mtbLabel { 
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    background: #7aad29; 
    height: 20px;
    width: 150px;
}
.mtButton a { 
    position: relative;
    display: block;
    float: left;
    background: url("https://admin.brandview.co.uk/prototypes/newbuttons/images/icons.png");
    padding-top: 20px;
}

JavaScript

(function($) {
    
    $.fn.mtButton = function(options) {
    
        var defaults = { speed: 100 };
            
        if (options) {
            $.extend(defaults, options);
        }
        
        return this.each(function() {
            
            var $el = $(this),
                c = defaults,
                classes = [];
            
            $el
                .prepend("<div class=\"mtbLabel\" /><div class=\"mtbIcons\" />");
            
            $el
                .hover(function(e) {
                    console.log(e.pageX)
                },
                function() {
               
                });
                
       });
        
    };
    
})(jQuery);

$(function() {

    $(".mtButton").mtButton();
    
});