<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Parallax 3D Button with JS controlled CSS variables</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a href="https://bit.ly/2VPFTdC" target="_blank" data-title="Awesome Button Click"></a>
<script src="js/index.js"></script>
</body>
</html>
a {
position: relative;
display: inline-block;
padding: 1.2em 2em;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: white;
}
a::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(135deg, #6e8efb, #a777e3);
border-radius: 4px;
transition: box-shadow .5s ease, -webkit-transform .2s ease;
transition: box-shadow .5s ease, transform .2s ease;
transition: box-shadow .5s ease, transform .2s ease, -webkit-transform .2s ease;
will-change: transform;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
}
a:hover::before {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
a::after {
position: relative;
display: inline-block;
content: attr(data-title);
transition: -webkit-transform .2s ease;
transition: transform .2s ease;
transition: transform .2s ease, -webkit-transform .2s ease;
font-weight: bold;
letter-spacing: .01em;
will-change: transform;
-webkit-transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
}
body {
background-color: #060b29;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: perspective(800px);
transform: perspective(800px);
}
