Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 10, 2022 05:02 pm GMT

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>

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

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


Original Link: https://dev.to/awcode0x/make-awesome-button-hover-effect-using-html-css-only-1abn

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To