Make awesome button hover effect using HTML CSS only

#css #hover #tutorial #webdev

Hello guys. today I will learn you how to do this:

we need only thoose:

In HTML file we will create button has class called "btn" (or any name you want):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome Button Hover Effect</title>
</head>
<body>
    <button class="btn">Hover me</button>
</body>
</html>

Don't forget link CSS file with HTML (in head tag):

<link rel="stylesheet" href="style.css">

In CSS file:

First we need to remove basic styles:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

we need edit the background and center button

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(8, 8, 8);
}

then we need to edit CSS of button ( without hover first ):

:root {
    --main-color: rgb(180, 255, 68);
}

.btn {
    position: relative;
    padding: 12px 35px;
    border: 3px solid var(--main-color);
    border-radius: 0;
    font-size: 17px;
    background: none;
    color: var(--main-color);
    font-family: sans-serif;
}

make before element for the button:

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    width: 100%;
    height: 100%;
    background-color: var(--main-color);
}

Then we need to make hover effect. the before element translateY will be 0 when hover.

.btn:hover {
    color: rgb(0, 0, 1);
}

.btn:hover::before {
    z-index: -10;
    transform: translateY(0);
}

then we need to appear before element only on hover, so we will add overflow hidden for button:

.btn {
   overflow: hidden;
}

the next thing we want to do is making the transitions:

.btn {
    transition: 0.5s linear;
}

.btn:hover {
    transition: 0.5s linear;
}

.btn::before {
    transition: 0.5s linear;
}

.btn:hover::before {
    transition: 0.5s linear;
}

the next thing we want to do is making drop shadow on hover

.btn:hover {
   filter: drop-shadow(0 0 50px var(--main-color));
}

the last step is making RGB color animation:

@keyframes animate {
    0% {
        filter: drop-shadow(0 0 50px var(--main-color)) hue-rotate(0deg);
    } 100% {
        filter: drop-shadow(0 0 50px var(--main-color)) hue-rotate(360deg);
    }
}

.btn {
    animation: animate 3s linear infinite;
}