Maison > Article > interface Web > Comment créer un effet d'animation de survol de bouton en utilisant CSS ?

Comment créer un effet d'animation de survol de bouton en utilisant CSS ?

PHPzavant: 2023-09-06 09:53:021320parcourir

Comment créer un effet danimation de survol de bouton en utilisant CSS ?

L'effet d'animation de survol en CSS signifie que l'apparence de l'élément change lorsque le pointeur de la souris le survole. Nous utilisons CSS pour créer divers effets d'animation en survol, tels que la mise à l'échelle, la décoloration, le glissement ou la rotation d'éléments.

Propriétés de l'effet d'animation de survol du bouton

transform - Cette propriété vous permet de mettre à l'échelle, de faire pivoter ou de traduire l'élément.
opacity - Cet attribut définit le niveau de transparence de l'élément, où 1 signifie entièrement visible et 0 signifie entièrement transparent.
background-color - Cet attribut définit la couleur d'arrière-plan de l'élément.
color - Cet attribut définit la couleur du texte de l'élément.
transition - Cette propriété contrôle l'effet d'animation entre deux états, tels que l'état par défaut et l'état de survol.
bottom et top - Les propriétés positionnent l'élément par rapport à son conteneur.

Créez des effets d'animation de survol de bouton à l'aide de CSS

Les animations de survol des boutons sont un excellent moyen d'ajouter un attrait visuel à votre site Web. Pour créer un effet d'animation de survol de bouton à l'aide de CSS, nous utilisons généralement le sélecteur de pseudo-classe :hover combiné avec des transitions CSS ou des animations d'images clés. Avec les étapes suivantes, nous pouvons facilement créer un effet d’animation de survol de bouton.

Étape 1 - Créer du code HTML pour l'animation de balle collante
Étape 2 - Ajouter un style CSS au bouton
Étape 3 - Ajouter un effet d'animation au survol

Dans cet article, nous explorerons trois exemples pour créer des effets d'animation de survol de boutons en CSS.

Exemple 1 - Passez la souris pour zoomer

Dans cet exemple, le bouton aura un fond bleu et un texte blanc. Lorsque le pointeur de la souris survole le bouton, le bouton sera mis à l'échelle de 20 % en 0,5 seconde en utilisant la propriété de transformation dans une transition douce, et la couleur d'arrière-plan deviendra verte.

<!DOCTYPE html>
<html>
<head>
   <style>
      Body{
         text-align:center;
      }
      .scale-up-btn {
         background-color: blue;
         color: white;
         padding: 10px 30px;
         margin:20px;
         border: none;
         transition: transform 0.5s ease;
         transform: scale(1);
         border-radius:10px;
      }
      .scale-up-btn:hover {
         transform: scale(1.2);
         background-color: green;
      }
   </style>
</head>
   <body>
      <h2>Button hover animation effect using CSS</h2>
      <h3>Scale Up on Hover effect</h3>
      <button class="scale-up-btn">Hover Me</button>
   </body>
</html>

Exemple 2 : Fondu entrant au survol de la souris

Dans cet exemple, le bouton aura un fond bleu et un texte blanc, avec une opacité initiale de 0,5. Lorsque le pointeur de la souris survole le bouton, l'opacité passe progressivement à 1 en 0,5 seconde.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .fade-in-btn {
         background-color: blue;
         color: white;
         padding: 10px 20px;
         margin:15px;
         border: none;
         opacity: 0.5;
         transition: opacity 0.5s ease;
      }
      .fade-in-btn:hover {
         opacity: 1;
      }
   </style>
</head>
   <body>
      <h2>Button hover animation effect using CSS</h2>
      <h3>Fade In Effect on Hover</h3>
      <button class="fade-in-btn">Hover Me</button>
   </body>
</html>

Exemple 3 : faites glisser votre doigt vers le haut au survol de la souris

Dans cet exemple, le bouton aura un fond bleu et un texte blanc, avec la position définie sur relative. La propriété bottom est définie sur 0, ce qui signifie que le bouton se trouve en bas de son conteneur. Lorsque le pointeur de la souris survole le bouton, la propriété du bas augmente à 20 pixels, ce qui fait glisser le bouton vers le haut avec une transition douce en 0,5 seconde.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .slide-up-btn {
         background-color: blue;
         color: white;
         padding: 15px 30px;
         border: none;
         position: relative;
         bottom: 0;
         transition: bottom 0.5s ease;
         border-radius:10px;
      }
      .slide-up-btn:hover {
         bottom: 20px;
      }
   </style>
</head>
   <body>
      <h3>Slide Up Effect on Hover</h3>
      <button class="slide-up-btn">Hover Me</button>
   </body>
</html>

Conclusion

Les effets d'animation de survol des boutons sont un excellent moyen d'ajouter un attrait visuel à votre site Web. En utilisant CSS, nous pouvons créer des effets dynamiques et attrayants qui distinguent le site Web. Juste quelques lignes de code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Définissez toutes les propriétés de l'image d'arrière-plan dans une seule section à l'aide de CSSArticle suivant：Définissez toutes les propriétés de l'image d'arrière-plan dans une seule section à l'aide de CSS

Articles Liés

Voir plus