Minimal Button #2 (Hover)
HTML
<div class="container">
<div class="btn">Awesome Hover</div>
</div>
CSS
body, html{
height: 100%;
min-height: 100%;
}
.container{
height: 100%;
min-height: 100%;
display: flex;
justify-content: center;
align-items:center;
}
.btn{
display: flex;
justify-content: center;
align-items:center;
width: 200px;
height: 50px;
background-color: transparent;
border: 3px solid #000;
border-radius: 3px;
box-shadow: inset 0 0 0 0 #000;
cursor: pointer;
top: 0;
bottom: 0;
transition: all 0.5s ease;
}
.btn:hover{
box-shadow: inset 200px 0 0 0 #000;
color: #fff;
}
