Button Hover Effect | blue button hover effect

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  CSSHope 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.

Written by – Code With Random/Anki 

Share on:

Leave a Comment