Button Hover Effect with HTML and CSS

In this article, we will learn how to create simple animation (Hover Effect) on button using only HTML & CSS. This kind of CSS animation is stylish and makes a widget looks beautiful. Earlier in this blog, I have shared a couple of CSS animation, but here in this blog, I am going to create a nice-looking button hover animation effect only with HTML and CSS. Apart from this, I have shared many Neumorphism design in my blog. Please make sure to check those as well.

Below is the video tutorials. watch and practices.

Hover effect is absolutely a change (of coloration, length, form, photo etc.) of a few element whilst you positioned a mouse arrow over it. Usually it is completed with css coding. The hover impact isn't always cranky in any respect and may be used practically for any css element.

Source Code:

First, you have to create two files. One of them is HTML, and the other is CSS. after creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE 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 Effect | By Code Info</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <button class="btn">
      <span>Hover Me</span>
    </button>
  </div>
    
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

body{
  background: blueviolet;
}

.wrapper{
  width: 350px;
  margin: 200px auto;
}

button{
  position: relative;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  margin: 20px 30px;
  background: rgba(0, 0, 0, 0.09);
  display: inline-block;
}

span{
  display: block;
  padding: 25px 80px;
}

button::before,
button::after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all 0.2s linear;
  background: #fff;
}

span::before,
span::after {
  content: "";
  width: 2px;
  height: 0;
  position: absolute;
  transition: all 0.2s linear;
  background: #fff;
}

button:hover::before,
button:hover::after{
  width: 100%;
}

button:hover span::before, 
button:hover span::after{
  height: 100%;
}

.btn::after {
  left: 0;
  bottom: 0;
  transition-duration: 0.4s;
}
.btn span::after {
  right: 0;
  top: 0;
  transition-duration: 0.4s;
}
.btn::before {
  right: 0;
  top: 0;
  transition-duration: 0.4s;
}
.btn span::before {
  left: 0;
  bottom: 0;
  transition-duration: 0.4s;
}

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for stopping by.

You may like this:

Source Code:

1 Comments

Post a Comment

About Us

Contact Form