<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);
    }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.