Create a button that moves with the mouse using Tilt.js

Do you have a main button? Would you like to animate it with a dynamic, modern interaction? Let's learn how with the Tilt.JS library!

LLLouis-Nicolas Leuillet

Updated on December 9, 2024

Do you have a main button? Do you want to animate it with a dynamic and modern interaction? Let’s learn together how to do it with the Tilt.JS library!

Step 1

The HTML code.

HTML

<a href="#" class="btn">
  Learn more
</a>

Step 2

Let's style the btn class.

CSS

.btn {
  font-family: arial;
  letter-spacing: 2px;
  font-size: 22px;
  text-transform: uppercase;
  background: #fc5185;
  color: #ffffff;
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: 0 0 60px -10px #CD106E;
  transition: all .3s;
  text-decoration: none;
}

Step 3

Now let's style the link when we hover over the element.

CSS

.btn:hover {
  box-shadow: 0 8px 65px -5px #CD106E;
}

Step 4

Add jQuery and Tilt.JS.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>

Add first jQuery then Tilt to your website, because Tilt uses jQuery.

Step 5

Activate Tilt with the element.

JAVASCRIPT

$('.btn').tilt({ scale: 1.1, speed: 1000 });

Category: Development