Hey, developers today in this post I am going to share an HTML Button with Hover Effect. To implement this button in your project, you have to just copy the HTML and CSS code and save the HTML code with .html file extension and CSS code with .css file extension then run the .html file in your browser and see the output.
Preview
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 Effect </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="buttonContainer">
<button class="btn"> Click Me </button>
</div>
</body>
</html>
CSS Code
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
position: relative;
}
.buttonContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn {
position: relative;
border: none;
width: 130px;
height: 50px;
background-color: orangered;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 20px;
transition: all 0.5s;
padding: 10px;
}
.btn::after {
content: '';
position: absolute;
left: 0%;
top: 0%;
width: 0%;
transition: all 0.5s;
z-index: -1;
border-radius: 5px;
border-top: 3px solid orangered;
}
.btn::before {
content: '';
position: absolute;
right: 0%;
bottom: 0%;
width: 0%;
transition: all 0.5s;
border-radius: 5px;
z-index: -1;
border-top: 3px solid orangered;
}
.btn:hover {
background-color: transparent;
color: orangered;
}
.btn:hover::after,
.btn:hover::before {
width: 100%;
}
