<title>3D Button Hover Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">
<span class="front">Click</span>
<span class="center"></span>
<span class="back">Here</span>
</a>
</body>
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #262626;
}
a
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 60px;
text-align: center;
transform-style: preserve-3d;
perspective: 1000px;
transform-origin: center center;
}
span
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
text-align: center;
line-height: 60px;
font-size: 24px;
background: rgba(255,255,255,.05);
transform-style: preserve-3d;
backface-visibility: hidden;
border-radius: 30px;
text-transform: uppercase;
color: #fff;
transition: 1s;
}
span.front
{
transform: rotateX(0deg) translateZ(20px);
}
a:hover span.front
{
transform: rotateX(-180deg) translateZ(20px);
}
span.back
{
transform: rotateX(180deg) translateZ(20px);
}
a:hover span.back
{
transform: rotateX(0deg) translateZ(20px);
}
span.center
{
background: linear-gradient(to left, #c31a5b, #7129bd);
}
span.center:before
{ content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #ffdd1f, #c31a5b);
border-radius: 30px;
transform: translateZ(-1px);
}
a:hover span.center
{
transform: rotateX(-180deg);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.