Posted on Sep 10, 2022

Make awesome button hover effect using HTML CSS only

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; }