JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span class="button" id="btn1"><input type="file"/>test</span>
    <button class="button" id="btn2">test</button>
</div>

CSS

div
{
    line-height: 24px;
}

.button
{
    display: inline-block;
    width: 24px;
    height: 24px;
    background: red;
    position: relative;
    overflow: hidden;
    border: 0;
    text-indent: -9999px;
}

input[type=file]
{
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    font-size: 1000px;
    border: 0;
}