Slide fill Button animation | HTML, CSS & JavaScript

body{
margin:0;
font-family:Arial;
background:#020617;
color:white;
}

/* SECTION */

.section{
display:flex;
min-height:220px;
border-bottom:1px solid #1f2937;
}

/* COMMON BUTTON */

.preview{
flex:1;
display:flex;
justify-content:center;
align-items:center;
background:#020617;
}

button{
padding:20px 60px;
font-size:16px;
cursor:pointer;
position:relative;
overflow:hidden;
background:transparent;
border:2px solid;
border-radius:10px;
z-index:1;
}

/* ========================= */
/* 1 LEFT FILL */
/* ========================= */

.btn1{
color:#22c55e;
border-color:#22c55e;
}

.btn1::before{
content:"";
position:absolute;
top:0; left:0;
width:0%;
height:100%;
background:#22c55e;
transition:.4s;
z-index:-1;
}

.btn1:hover{color:white;}
.btn1:hover::before{width:100%;}

/* ========================= */
/* 2 CENTER FILL */
/* ========================= */

.btn2{
color:#3b82f6;
border-color:#3b82f6;
}

.btn2::before{
content:"";
position:absolute;
top:0;
left:50%;
width:0%;
height:100%;
background:#3b82f6;
transform:translateX(-50%);
transition:.4s;
z-index:-1;
}

.btn2:hover{color:white;}
.btn2:hover::before{width:120%;}

/* ========================= */
/* 3 DIAGONAL */
/* ========================= */

.btn3{
color:#000;
border-color:#f59e0b;
}

.btn3::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:200%;
height:100%;
background:#f59e0b;
transform:skewX(-30deg);
transition:.5s;
z-index:-1;
}

.btn3:hover{color:#fff;}
.btn3:hover::before{left:100%;}

/* ========================= */
/* 4 DUAL FILL */
/* ========================= */

.btn4{
color:#ec4899;
border-color:#ec4899;
}

.btn4::before,
.btn4::after{
content:"";
position:absolute;
top:0;
width:0%;
height:100%;
background:#ec4899;
transition:.4s;
z-index:-1;
}

.btn4::before{left:0;}
.btn4::after{right:0;}

.btn4:hover{color:white;}
.btn4:hover::before,
.btn4:hover::after{width:50%;}

/* ========================= */
/* 5 LIQUID */
/* ========================= */

.btn5{
color:#000000;
border-color:#06b6d4;
}

.btn5::before{
content:"";
position:absolute;
left:0;
bottom:-100%;
width:100%;
height:250%;
background:#06b6d4;
border-radius:50%;
transition:.6s;
z-index:-1;
}

.btn5:hover{color:white;}
.btn5:hover::before{bottom:0;}

/* MOBILE */

@media(max-width:768px){
.section{
flex-direction:column;
}
}

- Slide fill Button animation

Live Preview