Button Hover Effect | blue button hover effect

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


Button Hover Effect | blue button hover effect

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 

Post a Comment

Previous Post Next Post