3D Tilt Effect on Hover with Vanilla Tilt.js

Demo

Full Screen

Code

HTML

<button type="button" class="btn" data-tilt data-tilt-scale="1.1"><span>BUTTON</span></button>

CSS

.btn {
  transform-style: preserve-3d;
  width: 200px;
  height: 60px;
  border: none;
  border-radius: 30px;
  background-image: linear-gradient(45deg, #750cf2, #0cbcf2);
  color: #fff;
  font-weight: bold;
  font-size: 1.25rem;
  letter-spacing: 2px;
  outline: none;
  cursor: pointer;
}
.btn > span {
  position: relative;
  display: block;
  transform: translateZ(40px);
}

JavaScript

VanillaTilt.init(document.querySelector(".btn"), {
  max: 35,
  speed: 400
});