<button class="btn">button</button>
<button class="btn">button2</button>
<button class="btn">button3</button>
<style>
body {
text-align: center;
background: lightblue;
}

.btn {
display: inline-block;
margin: 1em;
text-transform: uppercase;
padding: 1em 1.5em;
background: none;
color:darkblue;
font-weight: bold;
position: relative;
transition:color 0.25s ease;
border:3px solid RED;
}

.btn:hover {
color:white;
}

.btn::after {
position: absolute;
content: '';
top:0;
left: 0;
width: 0;
height: 100%;
background-color: Blue;
transform-origin:left;
transition:width 0.25s ease;
z-index:-1;
}

.btn:hover::after {
width: 100%;
}

</style>