Source Code:
HTML CODE:
<!DOCTYPE html>
<html lang= "en" >
<head>
<link rel= "stylesheet" href= "style.css" >
<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 With Awesome Hover Effect</title>
</head>
<body>
<div class= "container" >
<button> Hover Me</button>
<button> Hover Me</button>
<button> Hover Me</button>
<button> Hover Me</button>
</div>
</body>
</html>
Enter fullscreen mode
Exit fullscreen mode
CSS CODE:
* {
margin : 0 ;
padding : 0 ;
box-sizing : border-box ;
text-decoration : none ;
}
.container {
height : 100vh ;
width : 100% ;
display : flex ;
justify-content : center ;
align-items : center ;
}
button {
height : 50px ;
width : 150px ;
margin : 15px ;
font-size : 25px ;
font-weight : 550 ;
font-family : sans-serif ;
background : none ;
outline : none ;
color : #0e95BF ;
border : 2px solid #0e95BF ;
cursor : pointer ;
transition : 0.5s ease-in all ;
}
button :nth-child ( 1 ) :hover {
box-shadow : inset 0 60px 0 0 #0e95BF ;
color : white ;
}
button :nth-child ( 2 ) :hover {
box-shadow : inset 80px 50px #0e95BF ;
color : white ;
}
button :nth-child ( 3 ) :hover {
box-shadow : inset 0 0 0 40px #0e95BF ;
color : white ;
}
button :nth-child ( 4 ) :hover {
box-shadow : inset 150px 0 0 0 #0e95BF ;
color : white ;
}
Enter fullscreen mode
Exit fullscreen mode
Find Me On:
Facebook
Youtube
Github
Top comments (2)
Your demo
Pretty neat. Would be helpful for readers if you can explain how these effects works particularly with 'inset'