Hover avec un Effet personnalisé sur un bouton en CSS3

Récemment, j’ai fais des recherches qui ont confirmé que 99,9% des sites web ont au moins un bouton.

Mais combien de sites ont des effets de survol plus créatif que le changement de couleur standard ?
Pas beaucoup.

Mais pouvez réaliser plus que cela avec le CSS3 avec des effets de survol plus créatifs et de plus en plus stylé.

On va vous montrer tout de suite le résultat qu’on pourrait avoir à la fin notre tutoriel

1. La structure html

structure html

La structure HTML est constitué d’une balise .btn qui comportera deux éléments à l’intérieur de celui-ci .hover-bg et .hover-text

2. Le css initial

Les .hover-bg et .hover-text auront un positionnement initial défini par le CSS qui suit :

.hover-bg.reset sera l’état du bouton quand rien ne se passe (pas d’événement hover déclenché)

.hover-bg sera incliné à skew(-42deg) qui va donner l’effet d’inclinaison sur la couleur de fond du rectangle, mais aussi nous allons appliquer un skew(42deg) sur l’élément .hover-text pour redresser le texte.

Nous allons créer 2 classes supplémentaires enter et leave afin des gérer les événements hover ( mouseover et mouseout)
.enter – l’animation se fera à partir de la gauche
.leave – l’animation va se défaire à partir de la droite

3. Animation à partir de la classe .enter :

La classe .enter va être animer via la propriété left qui se fera dans un délai de 0.3s

Remarque: pour faciliter la compréhension nous avons volontairement enlevé les préfixes vendeurs sur certaines propriétés CSS

4. Animation à partir de la classe .leave:

La classe .leave va cacher l’élément vers la droite via un animation qui va le décaler à l’aide de la propriété left de 100% à 111% l’élément.

5. Alterner les classes avec Jquery

En plus simple, nous allons enlever la classe .reset, et ajouter la classe .enter quand l’utilisateur passera son pointeur sur le bouton.
Et inversement, lorsque le pointeur quittera le bouton on va enlever la classe .enter et ajouter la classe .leave

Et enfin, on va jouer sur un timeout de 500ms avant de retirer la classe .leave et remettre la classe initiale .Reset

Répondre