This post shows you how to create buttons with 3D effects on hover, which are created by Darkcode. To see how it works, just click on the button Run Pen below:
How to create buttons with 3D effects on hover
Step 1: Add Html
<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>Step 2: Add 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);
}