Button hover Animation | HTML, CSS & JavaScript

<div class="section">
<div class="preview">
<button class="btn1">Glow Button</button>
</div>

<div class="code">
<pre>
    .btn:hover{
        box-shadow:0 0 20px #3b82f6,0 0 40px #3b82f6;
        transform:scale(1.05);
    }
</pre>
</div>
</div>

<div class="section">
<div class="preview">
<button class="btn2">Slide Fill</button>
</div>

<div class="code">
    <pre>
        .btn::before{
            content:"";
            position:absolute;
            top:0;
            left:0;
            width:0%;
            height:100%;
            background:#22c55e;
            transition:0.4s;
            z-index:-1;
        }
    </pre>
</div>
</div>

<div class="section">
<div class="preview">
<button class="btn3">Border Draw</button>
</div>

<div class="code">
    <pre>
        .btn::before,
        .btn::after{
            content:"";
            position:absolute;
            width:0;
            height:2px;
            background:#f59e0b;
            transition:.3s;
        }
    </pre>
</div>
</div>

<div class="section">
<div class="preview">
<button class="btn6">Shine Sweep</button>
</div>

<div class="code">
    <pre>
        .btn:hover::after{
            animation:shine .8s;
        }
            
        @keyframes shine{
            100%{left:150%;}
        }
    </pre>
</div>
</div>

<div class="section">
<div class="preview">
<button class="btn7">Gradient Move</button>
</div>

<div class="code">
    <pre>
        .btn:hover{
            animation:gradientMove 2s linear infinite;
        }
            
        @keyframes gradientMove{
            0%{background-position:0%}
            100%{background-position:300%}
        }
    </pre>
</div>
</div>

<div class="section">
<div class="preview">
<button class="btn8">Ripple Hover</button>
</div>

<div class="code">
    <pre>
        .btn:hover{
            box-shadow:0 0 0 10px rgba(16,185,129,0.3);
        }
    </pre>
</div>
</div>

<div class="section">
<div class="preview">
<button class="btn9">Neon Border</button>
</div>

<div class="code">
    <pre>
        .btn:hover{
            box-shadow:
            0 0 10px #0ff,
            0 0 20px #0ff,
            0 0 40px #0ff;
        }
    </pre>
</div>
</div>

<div class="section">
<div class="preview">
<button class="btn10">Flip Button</button>
</div>

<div class="code">
    <pre>
        .btn:hover{
            transform:rotateX(360deg);
        }
    </pre>
</div>
</div>

<div class="section">
    <div class="preview">
    <button class="btn1">Glow Button</button>
    </div>
    
    <div class="code">
    <pre>
        .btn:hover{
            box-shadow:0 0 20px #3b82f6,0 0 40px #3b82f6;
            transform:scale(1.05);
        }
    </pre>
    </div>
    </div>
    
    
    <div class="section">
    <div class="preview">
    <button class="btn2">Slide Fill</button>
    </div>
    
    <div class="code">
        <pre>
            .btn::before{
                content:"";
                position:absolute;
                top:0;
                left:0;
                width:0%;
                height:100%;
                background:#22c55e;
                transition:0.4s;
                z-index:-1;
            }
        </pre>
    </div>
    </div>

pre {
    color: #12ea8c;
    font-size: 16px;
}
body{
font-family: Arial;
margin:0;
background:#0f172a;
color:white;
}

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

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

.code{
flex:1;
padding:20px;
background:#111827;
overflow:auto;
font-size:14px;
}

button{
padding:20px 45px;
border:none;
font-size:20px;
cursor:pointer;
}

/* 1 Glow Hover */

.btn1{
background:#2563eb;
color:white;
border-radius:8px;
transition:.3s;
}

.btn1:hover{
box-shadow:0 0 20px #3b82f6,0 0 40px #3b82f6;
transform:scale(1.05);
}

/* 2 Slide Fill */

.btn2{
padding: 20px 45px;
font-size:20px;
color:#22c55e;
border:2px solid #22c55e;
background:none;
cursor:pointer;
position:relative;
overflow:hidden;
z-index:1;
}

/* Sliding background */

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

/* Hover effect */

.btn2:hover{
color:white;
}

.btn2:hover::before{
width:100%;
}

/* 3 Border Draw */

.btn3{
background:none;
color:#f59e0b;
border:2px solid transparent;
position:relative;
padding: 20px 45px;
}

.btn3::before,
.btn3::after{
content:"";
position:absolute;
width:0;
height:2px;
background:#f59e0b;
transition:.3s;
}

.btn3::before{
top:0;
left:0;
}

.btn3::after{
bottom:0;
right:0;
}

.btn3:hover::before{
width:100%;
}

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

/* 6 Shine Sweep */

.btn6{
background:#0ea5e9;
color:white;
position:relative;
overflow:hidden;
}

.btn6::after{
content:"";
position:absolute;
top:0;
left:-100%;
width:50%;
height:100%;
background:rgba(255,255,255,.4);
transform:skewX(-20deg);
}

.btn6:hover::after{
animation:shine .8s;
}

@keyframes shine{
100%{left:150%;}
}

/* 7 Gradient Move */

.btn7{
background:linear-gradient(45deg,#ec4899,#8b5cf6,#06b6d4);
background-size:300%;
color:white;
border-radius:8px;
}

.btn7:hover{
animation:gradientMove 2s linear infinite;
}

@keyframes gradientMove{
0%{background-position:0%}
100%{background-position:300%}
}

/* 8 Ripple */

.btn8{
background:#10b981;
color:white;
border-radius:6px;
position:relative;
overflow:hidden;
}

.btn8:hover{
box-shadow:0 0 0 10px rgba(16,185,129,0.3);
}

/* 9 Neon Border */

.btn9{
background:black;
color:#0ff;
border:2px solid #0ff;
}

.btn9:hover{
box-shadow:
0 0 10px #0ff,
0 0 20px #0ff,
0 0 40px #0ff;
}

/* 10 Flip */

.btn10{
background:#f97316;
color:white;
transition:.5s;
}

.btn10:hover{
transform:rotateX(360deg);
}

/* Mobile */

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

- Button hover Animation

Live Preview