DEV Community

Rutvik Patel
Rutvik Patel

Posted on • Edited on • Originally published at Medium

Animated Hover Button Using HTML CSS only

#webdev #design #html #css

Button with Amazing Hover Effects

In this blog, we are going to learn “How to Create a button with hover effects Using HTML & CSS Only.”

Created By [Rutik Patel](https://youtu.be/N5racZCWCoY)

 

Points to be discussed

  • Preview

  • YouTube Tutorial

  • HTML Code

  • CSS Code

  • References

 

Preview :

A live demo of the website can be viewed by clicking here.

Screenshot to Demonstrate

YouTube Tutorial :

HTML CODE :

index.html

<!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>Button Hover Sunglass Effect</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="main">
    <h1>Button Hover Sunglass Effect</h1>
    <button id="btn_1"> Hover Me !!</button>
    <button id="btn_2"> Hover Me !!</button>
    <button id="btn_3"> Hover Me !!</button>
    <button id="btn_4"> Hover Me !!</button>
  </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

CSS CODE :

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}

/* Common CSS Code for all buttons */
button {
  background: transparent;
  font-size: 2.5rem;
  padding: 1rem 0.5rem;
  position: relative;
  transition: all 0.5s linear;
}

button::before {
  content: '';
  position: absolute;
  background-color: rgb(245, 86, 86);
  transition: all 0.4s linear;
  z-index: -1;
}

button:hover {
  color: white;
}

/* Code According to effect */
/* btn_1 */
#btn_1::before {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
}

#btn_1:hover::before {
  width: 100%;
}

/* btn_2 */
#btn_2::before {
  width: 0%;
  height: 100%;
  top: 0;
  right: 0;
}

#btn_2:hover::before {
  width: 100%;
}

/* btn_3 */
#btn_3::before {
  width: 100%;
  height: 0%;
  top: 0;
  right: 0;
}

#btn_3:hover::before {
  height: 100%;
}

/* btn_4 */
#btn_4::before {
  width: 100%;
  height: 0%;
  bottom: 0;
  right: 0;
}

#btn_4:hover::before {
  height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

References :

GitHub Repository: https://github.com/rutikkpatel/HTML-CSS/tree/main/Button%20Hover%20Sunglass%20Effect

Top comments (0)

Read next

spicecoder profile image

Hierarchical Flattening: The Secret to Managing Complexity in Software Design

pronab pal -

jhernandez504 profile image

Intro Into Bulma CSS: How Good Is It?

Jeremy Hernandez -

oculus42 profile image

Do we need Promise.allSettled()?

Samuel Rouse -

raja_yadav profile image

Boost Your Business with Professional Web Development & Cybersecurity Solutions!

Raja Yadav -