It is quite simple to create Button Hover Effect. This source code is written for anyone who also has less knowledge of HTML and CSS. You can understand easily when you watch this Sourcecode.
In this source code, we are given you HTML and CSS code separately.
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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Login</a>
</li>
</ul>
</nav>
</header>
</body>
</html>After pasting this HTML code we are given below CSS code you also need to write this code for the button hover effect.
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: rgb(30, 35, 44);
display: grid;
place-items: center;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
ul {
width: 100%;
display: flex;
justify-content: center;
}
ul li {
list-style: none;
}
ul li a {
color: #40e0d0;
padding: 8px 15px;
margin: 0 10px;
text-decoration: none;
position: relative;
}
ul li a::before {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
box-sizing: border-box;
transition: all 0.4s;
border-top: 2px solid #40e0d0;
border-left: 2px solid #40e0d0;
}
ul li a::after {
content: "";
width: 100%;
height: 100%;
bottom: 0;
right: 0;
box-sizing: border-box;
position: absolute;
transition: all 0.4s;
border-bottom: 2px solid #40e0d0;
border-right: 2px solid #40e0d0;
}
ul li a:hover:before,
ul li a:hover:after {
width: 10%;
height: 20%;
transform: rotate(360deg);
}
Conclusion
You can use this hover effect anywhere where do you want to use it. This source code also learn you how to develop this kind of hover effect.
