Erstelle ansprechende Button-Füllanimationen mit CSS

Einführung

In diesem Lab werden wir lernen, wie man mit CSS eine Füllanimation beim Hovern über einen Button erstellt. Wir werden die :hover-Pseudoklasse verwenden, um die Hintergrundfarbe und Textfarbe des Buttons zu ändern, wenn der Benutzer darüber hovern, und auch einen Übergangseffekt hinzufügen, um die Änderungen zu animieren. Am Ende dieses Labs werden Sie in der Lage sein, die Benutzererfahrung auf Ihrer Website zu verbessern, indem Sie attraktive Hover-Effekte zu Ihren Buttons hinzufügen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) 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{{"Button-Füllanimation"}} css/colors -.-> lab-35176{{"Button-Füllanimation"}} css/margin_and_padding -.-> lab-35176{{"Button-Füllanimation"}} css/borders -.-> lab-35176{{"Button-Füllanimation"}} css/backgrounds -.-> lab-35176{{"Button-Füllanimation"}} css/pseudo_classes -.-> lab-35176{{"Button-Füllanimation"}} css/transitions -.-> lab-35176{{"Button-Füllanimation"}} end

Button-Füllanimation

index.html und style.css wurden bereits in der VM zur Verfügung gestellt.

Um eine Füllanimation beim Hovern zu erstellen, können Sie die Farbe und Hintergrund-Eigenschaften festlegen und einen geeigneten Übergang anwenden, um die Änderungen zu animieren. Um die Animation beim Hovern auszulösen, verwenden Sie die :hover-Pseudoklasse, um die Hintergrund- und Farbe-Eigenschaften des Elements zu ändern. Hier ist ein Beispielcodeausschnitt:

<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;
}

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab zu Button-Füllanimation abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.