Créer des animations de remplissage de boutons captivantes avec CSS

Introduction

Dans ce laboratoire, nous allons apprendre à créer une animation de remplissage au survol d'un bouton à l'aide de CSS. Nous utiliserons la pseudo-classe :hover pour changer le background et la couleur du bouton lorsque l'utilisateur le survole, et ajouter également un effet de transition pour animer les changements. À la fin de ce laboratoire, vous serez capable d'améliorer l'expérience utilisateur sur votre site web en ajoutant des effets de survol attrayants à vos boutons.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/DynamicStylingGroup -.-> css/transitions("Transitions") subgraph Lab Skills css/selectors -.-> lab-35176{{"Animation de remplissage du bouton"}} css/colors -.-> lab-35176{{"Animation de remplissage du bouton"}} css/margin_and_padding -.-> lab-35176{{"Animation de remplissage du bouton"}} css/borders -.-> lab-35176{{"Animation de remplissage du bouton"}} css/backgrounds -.-> lab-35176{{"Animation de remplissage du bouton"}} css/pseudo_classes -.-> lab-35176{{"Animation de remplissage du bouton"}} css/transitions -.-> lab-35176{{"Animation de remplissage du bouton"}} end

Animation de remplissage du bouton

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

Pour créer une animation de remplissage au survol, vous pouvez définir les propriétés couleur et background et appliquer une transition appropriée pour animer les changements. Pour déclencher l'animation au survol, utilisez la pseudo-classe :hover pour changer les propriétés background et couleur de l'élément. Voici un extrait de code d'exemple :

<button class="animated-fill-button">Submit</button>

.animated-fill-button {
  padding: 20px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}

.animated-fill-button:hover {
  background: #000;
  color: #fff;
}

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.

Sommaire

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