Créez une animation d'agrandissement de bouton captivante avec CSS

Introduction

Dans ce laboratoire (lab), nous allons apprendre à créer un bouton avec une animation d'agrandissement au survol à l'aide de CSS. Cet effet peut être utilisé pour ajouter de l'interactivité et un intérêt visuel à un site web ou une application. En appliquant la propriété transform et la pseudo-classe :hover, nous pouvons faire grossir le bouton lorsque l'utilisateur le survole, créant ainsi une animation subtile mais efficace.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Animation d'agrandissement de bouton

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

Pour créer une animation d'agrandissement au survol, vous pouvez utiliser une transition appropriée pour animer les changements apportés à l'élément. Utilisez la pseudo-classe :hover pour changer la propriété transform en scale(1.1). Cela fera grossir l'élément lorsque l'utilisateur le survole.

Voici un exemple de code que vous pouvez utiliser :

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

.button-grow {
  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-grow:hover {
  transform: scale(1.1);
}

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

Résumé

Félicitations! Vous avez terminé le laboratoire (lab) sur l'animation d'agrandissement de bouton. Vous pouvez pratiquer davantage de laboratoires sur LabEx pour améliorer vos compétences.