JSFiddle - React, Tailwind, and code Playground

HTML

<div style="padding:100px;">
    <div class="uploadButton">
        BILD AUSWĂ„HLEN
        <input type="file" />
    </div>
</div>

CSS

.uploadButton input[type="file"] {
    cursor:pointer;
    position:absolute;
    top:0px;
    opacity:0;
}

.uploadButton {
     position:relative;
    overflow:hidden;
    cursor:pointer;
      
    
text-transform: uppercase;
font-size: 13px;
font-family: 'Roboto',Arial,sans-serif;
padding: 8px 22px;
display: inline-block;
-moz-border-radius: 2px;
border-radius: 2px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1) inset;
color: #FFF;
background-color: #2561BA;
}
.uploadButton:hover {
    opacity:1;   
}

JavaScript

$(function() {
    $(".uploadButton").mousemove(function(e) {
        var offL, offR, inpStart
        offL = $(this).offset().left;
        offT = $(this).offset().top;
        aaa= $(this).find("input").width();
        $(this).find("input").css({
            left:e.pageX-aaa-30,
            top:e.pageY-offT-10
        })
    }); 
});