Button Hover Effect | blue button hover effect
Welcome🎉 to Code With Random blog. In this blog, we learn that how to create a Button Hover Effect. We use HTML & CSS for this Button Hover Effect. Hope you enjoy our blog so let’s start with a basic HTML structure for Button Hover Effect.
HTML code for Button Hover Effect
<!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>
<button class="btn">Hover</button>
</body>
</html>
There is all HTML code for the Button Hover Effect. Now, you can see output without CSS, then we write CSS for our Button Hover Effect.
Output.
CSS for Button Hover Effect
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.btn{
width: 120px;
height: 40px;
font-size: 1.1em;
background: none;
border: none;
color: white;
position: relative;
cursor: pointer;
}
.btn::before,.btn::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #00000000;
backdrop-filter: blur(20px);
border-radius: 10px;
z-index: -2;
}
.btn::after{
width: 110%;
height: 90%;
top: 25%;
left: -5%;
background: #2C2891;
z-index: -3;
transform: scaleX(0.5);
transition: all .6s;
}
.btn:hover::after{
transform: scaleX(1.01) translateY(-15px);
}
Output
Github link of this project
Check it more
Now we have completed our CSS section, Here is our updated output with CSS. Hope you like Button Hover Effect. Using CSS, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕
In this post, we learn how to create a Button Hover Effect using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.