Vous avez un bouton principal ? Vous souhaitez l'animer avec une interaction dynamique et moderne ? Apprenons ensemble à le faire avec la librairie Tilt.JS !
Le code HTML.
<a href="#" class="btn">
En savoir plus
</a>
Stylisons la classe btn.
.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;
}
Maintenant passons au style du lien lorsque nous passons la souris sur l'élément.
.btn:hover {
box-shadow: 0 8px 65px -5px #CD106E;
}
Ajoutons jQuery et Tilt.JS.
<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.
Activons Tilt avec l'élément.
$('.btn').tilt({ scale: 1.1, speed: 1000 });
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble votre projet.