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

In this article

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: Developers

In this article

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: Developers

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

Step 1

Step 2

Step 3

Step 4

Step 5

Share this article

Read next

Create an animated "rainbow" button with CSS

Create an animated 3D button using CSS

Animate emojis like on Discord with JavaScript

Create a very modern hover on a link

Creating circled buttons on hover with HTML and CSS

Creating a sinking button with CSS

Create a glitch effect on mouse-over with CSS

Create an "architectural" design button using CSS

Become the solopreneur you dream of being.

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

Step 1

Step 2

Step 3

Step 4

Step 5

Share this article