DEV Community 👩‍💻👨‍💻

AWCode0X
AWCode0X

Posted on

Make awesome button hover effect using HTML CSS only

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

we need only thoose:

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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

<link rel="stylesheet" href="style.css">
Enter fullscreen mode Exit fullscreen mode

In CSS file:

  • First we need to remove basic styles:
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode
  • 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);
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode

Image description

  • 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);
}
Enter fullscreen mode Exit fullscreen mode
  • 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);
}
Enter fullscreen mode Exit fullscreen mode
  • then we need to appear before element only on hover, so we will add overflow hidden for button:
.btn {
   overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode
  • the next thing we want to do is making drop shadow on hover
.btn:hover {
   filter: drop-shadow(0 0 50px var(--main-color));
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (8)

Collapse
 
naubit profile image
Al - Naubit

Thanks, it was a good read, bookmarked, and followed!

Collapse
 
awcode0x profile image
AWCode0X Author • Edited on

Thanks 😀😀❤❤

Collapse
 
rohitmore07 profile image
Rohit More

Awsm!

Collapse
 
awcode0x profile image
AWCode0X Author

Thank you ❤😀😁😊

Collapse
 
pranav2580 profile image
Pranav Kumar

Amazing 😀

Collapse
 
awcode0x profile image
AWCode0X Author

Thanks 😀😀😀

Collapse
 
smarts8855 profile image
Tunde

Great work

Collapse
 
awcode0x profile image
AWCode0X Author

Thanks 😀😀😀

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.