This is a button hover effect.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<style type="text/css">
body{
margin: 0;
padding: 0;
background: #f1f1f1;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btn{
width: 220px;
height: 50px;
background: #6a89cc;
margin: 40px;
border: none;
outline: none;
cursor: pointer;
color: #fff;
font-family: "montserrat",sans-serif;
text-transform: uppercase;
font-size: 16px;
transition: 0.4s;
transform-style: preserve-3d;
perspective: 800px;
}
.btn::after{
content: '';
position: absolute;
background: #4a69bd;
transition: 0.4s;
}
.btn1:hover{
transform: rotateX(-20deg);
}
.btn1:after{
width: 100%;
height: 24px;
top: -24px;
left: 0;
transform-origin: 0 100%;
transform: rotateX(90deg);
}
.btn2:hover{
transform: rotateX(20deg);
}
.btn2:after{
width: 100%;
height: 24px;
top: 100%;
left: 0;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
.btn3:hover{
transform: rotateY(20deg);
}
.btn3::after{
width: 30px;
height: 100%;
left: -30px;
top: 0;
transform-origin: 100% 0;
transform: rotateY(-90deg);
}
.btn4:hover{
transform: rotateY(-20deg);
}
.btn4::after{
width: 30px;
height: 100%;
left: 100%;
top: 0;
transform-origin: 0 0;
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div class="container">
<button class="btn btn1">Hover Me</button>
<button class="btn btn2">Hover Me</button>
<button class="btn btn3">Hover Me</button>
<button class="btn btn4">Hover Me</button>
</div>
</body>
</html>