Créer un bouton qui bouge avec la souris (tilt.js)
Vous avez un bouton principal ? Vous souhaitez l'animer avec une interaction dynamique et moderne ? Apprenons ensemble à le faire avec la librairie Tilt.JS !
Mis à jour le 3 décembre 2024
Vous avez un bouton principal ? Vous souhaitez l'animer avec une interaction dynamique et moderne ? Apprenons ensemble à le faire avec la librairie Tilt.JS !
1ère étape
Le code HTML.
HTML
<a href="#" class="btn">
En savoir plus
</a>
2ème étape
Stylisons la classe btn.
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;
}
3ème étape
Maintenant passons au style du lien lorsque nous passons la souris sur l'élément.
CSS
.btn:hover {
box-shadow: 0 8px 65px -5px #CD106E;
}
4ème étape
Ajoutons jQuery et 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>Ajoutez d'abord jQuery puis ensuite Tilt à votre site internet, car Tilt utilise jQuery.
5ème étape
Activons Tilt avec l'élément.
JAVASCRIPT
$('.btn').tilt({ scale: 1.1, speed: 1000 });Catégorie : Développement
