DEV Community

AWCode0X
AWCode0X

Posted on

8 3

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:

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

profile
Sentry
 Promoted

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (8)

Collapse
 
naucode profile image
Al - Naucode •

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

Collapse
 
awcode0x profile image
AWCode0X • • Edited

Thanks 😀😀❤❤

Collapse
 
rohitmore07 profile image
Rohit More •

Awsm!

Collapse
 
awcode0x profile image
AWCode0X •

Thank you ❤😀😁😊

Collapse
 
pranav2580 profile image
Pranav Kumar •

Amazing 😀

Collapse
 
awcode0x profile image
AWCode0X •

Thanks 😀😀😀

Collapse
 
smarts8855 profile image
Tunde •

Great work

Collapse
 
awcode0x profile image
AWCode0X •

Thanks 😀😀😀

profile
Sentry
 Promoted

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Dive into this insightful write-up, celebrated within the collaborative DEV Community. Developers at any stage are invited to contribute and elevate our shared skills.

A simple "thank you" can boost someone’s spirits—leave your kudos in the comments!

On DEV, exchanging ideas fuels progress and deepens our connections. If this post helped you, a brief note of thanks goes a long way.

Okay