Make awesome button hover effect using HTML CSS only

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by AWCode0X

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

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by AWCode0X

Print Share Comment Cite Upload Translate Updates

APA

AWCode0X | Sciencx (2022-09-10T17:02:00+00:00) Make awesome button hover effect using HTML CSS only. Retrieved from https://www.scien.cx/2022/09/10/make-awesome-button-hover-effect-using-html-css-only/

MLA

" » Make awesome button hover effect using HTML CSS only." AWCode0X | Sciencx - Saturday September 10, 2022, https://www.scien.cx/2022/09/10/make-awesome-button-hover-effect-using-html-css-only/

HARVARD

AWCode0X | Sciencx Saturday September 10, 2022 » Make awesome button hover effect using HTML CSS only., viewed ,<https://www.scien.cx/2022/09/10/make-awesome-button-hover-effect-using-html-css-only/>

VANCOUVER

AWCode0X | Sciencx - » Make awesome button hover effect using HTML CSS only. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/10/make-awesome-button-hover-effect-using-html-css-only/

CHICAGO

" » Make awesome button hover effect using HTML CSS only." AWCode0X | Sciencx - Accessed . https://www.scien.cx/2022/09/10/make-awesome-button-hover-effect-using-html-css-only/

IEEE

" » Make awesome button hover effect using HTML CSS only." AWCode0X | Sciencx [Online]. Available: https://www.scien.cx/2022/09/10/make-awesome-button-hover-effect-using-html-css-only/. [Accessed: ]

rf:citation

» Make awesome button hover effect using HTML CSS only | AWCode0X | Sciencx | https://www.scien.cx/2022/09/10/make-awesome-button-hover-effect-using-html-css-only/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts