Animation de rétrécissement de bouton

Introduction

Dans ce laboratoire, nous allons explorer la manière de créer une animation de rétrécissement de bouton à l'aide de CSS. Le but de ce laboratoire est de vous aider à comprendre comment utiliser la pseudo-classe :hover et la propriété transition pour créer une animation fluide et visuellement attrayante lorsque l'utilisateur survole un bouton. À la fin de ce laboratoire, vous aurez une bonne compréhension de la manière de créer des animations simples mais efficaces à l'aide de CSS.

Skills Graph

Animation de rétrécissement de bouton

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer une animation de rétrécissement au survol d'un élément, vous pouvez utiliser une propriété transition appropriée pour animer les changements et la pseudo-classe :hover pour déclencher l'animation. Par exemple, si vous voulez rétrécir un bouton avec la classe button-shrink lorsque l'utilisateur le survole, vous pouvez ajouter le CSS suivant :

.button-shrink {
  color: #65b5f6;
  background-color: transparent;
  border: 1px solid #65b5f6;
  border-radius: 4px;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.button-shrink:hover {
  transform: scale(0.8);
}

Cela appliquera un effet de transition à toutes les propriétés du bouton lorsqu'il y a un changement, et lorsque l'utilisateur le survole, le bouton se rétrécira à 80 % de sa taille d'origine. Le code HTML pour le bouton est le suivant :

<button class="button-shrink">Submit</button>

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Animation de rétrécissement de bouton. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.