HTML
<div class="container">
<!-- Button One -->
<div class="btn-perspective">
<button class="btn btn-3d btn-one">
Hover Me
</button>
</div>
<!-- Button Two -->
<div class="btn-perspective">
<button class="btn btn-3d btn-two">
Hover Me
</button>
</div>
<!-- Button Three -->
<div class="btn-perspective">
<button class="btn btn-3d btn-three">
Hover Me
</button>
</div>
<!-- Button Four -->
<div class="btn-perspective">
<button class="btn btn-3d btn-four">
Hover Me
</button>
</div>
</div>
CSS
/* Basic */
* {
box-sizing:border-box;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
font-family: Arial, sans-serif;
overflow: hidden;
background: #eaf6ff;
}
.container {
height: 100%;
width: 671px;
position: relative;
margin: 200px auto;
}
/* Buttons */
.btn {
border: none;
position: relative;
background: none;
padding: 28px 90px;
display: inline-block;
text-transform: uppercase;
margin: 30px;
color: inherit;
letter-spacing: 2px;
font-size: 0.9em;
outline: none;
transition: all 0.4s;
cursor: pointer;
}
.btn:after {
content: "";
position: absolute;
z-index: -1;
transition: all 04.s;
}
.btn-perspective {
perspective: 800px;
display: inline-block;
}
.btn-3d {
color: #fff;
display: block;
outline: 1px solid transparent;
transform-style: preserve-3d;
}
/* Button One */
.btn-one {
background-color: #E74C3C;
}
.btn-one:after {
width: 100%;
height: 42%;
left: 0;
top: -40%;
background: #C0392D;
transform-origin: 0% 100%;
transform: rotateX(90deg);
}
.btn-one:hover {
transform: rotateX(-45deg);
}
/* Button Two */
.btn-two {
background-color: #3498DB;
}
.btn-two:after {
width: 100%;
height: 40%;
left: 0;
top: 100%;
background: #2980D9;
transform-origin: 0% 0%;
transform: rotateX(-90deg);
}
.btn-two:hover {
transform: rotateX(35deg);
}
/* Button Three */
.btn-three {
background-color: #1ABC9C;
}
.btn-three:after {
width: 20%;
height: 100%;
left: -20%;
top: 0;
background: #16A085;
transform-origin:100% 0%;
transform: rotateY(-90deg);
}
.btn-three:hover {
transform: rotateY(25deg);
}
/* Button Four */
.btn-four {
background-color: #9B59B6;
}
.btn-four:after {
width: 20%;
height: 100%;
left: 100%;
top: 0;
background: #8E44AD;
transform-origin: 0% 0%;
transform: rotateY(90deg);
}
.btn-four:hover {
transform: rotateY(-25deg);
}
1 Response