JSFiddle - React, Tailwind, and code Playground

HTML

<button>Enviar</button>

CSS

button {
 width: 25%;
 height:10%;
 border: solid 3px #0099FF;
 background: white;
 color: black;
 margin-top:2%;
 padding: 10px;
 font-size: 20px;
 font-family: "Montserrat-Regular";
 border-radius: 5px;
 position: relative;
 box-sizing: border-box;
 transition: all 500ms ease;
 cursor:pointer;
 z-index: 1;
}

button:before {
 content:'';
 position: absolute;
 top: 0px;
 left: 0px;
 width: 0px;
 height: 100%;
 background: rgba(0, 153, 255, 0.5);
 border-radius: 1px;
 transition: all 1s ease;
 color: white;
 z-index: 1;
}

button:hover:before {
 width: 100%;
 color: white;
 z-index: 1;
}