Création de boutons web animés

Les propriétés de transition CSS vous permettent d’appliquer des effets simples mais élégants à votre page. L'ajout d'animations simples pour fournir des informations aux visiteurs de votre site est un bon moyen d'améliorer l'expérience utilisateur. Parmi les effets d'animation possibles figure le changement de la couleur, de la bordure et de la taille du bouton ou de son libellé. Le code CSS utilisé pour les propriétés de transition est mis en évidence à chaque étape de ce tutoriel. Pour pouvoir suivre ce dernier et voir l'intégralité du code, veillez à télécharger les fichiers du projet.

Ce tutoriel n’aborde qu'une partie des possibilités offertes par les transitions CSS. Téléchargez les fichiers du projet et entraînez-vous.

En quoi consiste une transition ?

Un effet de transition sur un objet tel qu’un bouton requiert deux styles CSS différents : un pour l’état normal du bouton et l’autre pour l’état « survol » (lorsque l’utilisateur passe sur le bouton avec la souris). 

Dans cet exemple, le style du bouton à l’état normal est défini par un sélecteur d'ID CSS (#button1) et le style à l’état « survol » par un pseudo-sélecteur (#button1:hover). Un pseudo-sélecteur définit le style d’un élément dans un état précis, comme lorsqu’un utilisateur sélectionne ou passe sur un lien.

Ici, il s’agit de la couleur de fond qui passe du bleu au rouge. Vous allez inclure quatre propriétés pour personnaliser la transition :

• transition-property : spécifiez la propriété CSS à modifier (background)
• transition-duration : spécifiez la durée de la transition (0.3s)
• transition-timing-function : indiquez si la vitesse de l’effet de transition change sur la durée (ease)
• transition-delay : spécifiez le délai de déclenchement de la transition (0s)

Avant de commencer

Ouvrez le fichier create-animated-website-buttons.html dans Dreamweaver et affichez le fichier style.css en mode Fractionner.

Définissez les styles dans la feuille CSS pour que le bouton bleu devienne rouge quand l'utilisateur passe dessus avec la souris.

Le code CSS du bouton à l’état normal attribue la valeur blue à la propriété background. La propriété transition-property de la même règle CSS indique que la propriété background change lorsqu’une action donnée provoque un changement d’état. Les autres propriétés de transition déterminent la rapidité et la fluidité du changement.

• transition-timing-function : avec la valeur ease, l’effet démarre lentement, accélère et ralentit à la fin.

Le pseudo-sélecteur indique que la propriété background du bouton prend la valeur red lorsque l’utilisateur passe sur ce dernier avec la souris et appelle l’état hover (survol).

CSS (Normal)

#button1 {
  ...
  background:#ADD7F4;
  transition-property: background;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0;
}

CSS (Survol)

#button1:hover {
  background:#EA575B;
}

Définissez les styles dans la feuille CSS pour modifier la couleur de la bordure et du texte du bouton.

Le code CSS du bouton à l’état normal attribue à la propriété border-color la valeur light blue et la valeur almost white à la propriété color du texte. La propriété transition-property de la même règle CSS indique que les propriétés border-color et color changent lorsqu’une action donnée provoque un changement d’état. Les autres propriétés de transition déterminent la rapidité et la fluidité du changement.

• transition-timing-function: avec la valeur linear, la vitesse de l’effet est la même du début à la fin.

Le pseudo-sélecteur indique que les propriétés border-color et color du bouton prennent la valeur dark blue lorsque l’utilisateur passe sur ce dernier avec la souris et appelle l’état hover (survol).

CSS (Normal)

#button2 {
  ...
  border-color: #7A97B2;
  color: #f4f4f4;
  transition-property: border-color, color;
  transition-duration: 0.1s;
  transition-timing-function: linear;
  transition-delay: 0;
}

CSS (Survol)

button2:hover {
  border-color: #204F81;
  color: #183B61;
}

Définissez les styles dans la feuille CSS pour modifier la taille du bouton.

Le code CSS du bouton à l’état normal attribue la valeur 400px à la propriété width, la valeur 100px à la propriété height et la valeur 60px à la propriété line-height. La propriété transition-property de la même règle CSS indique que les propriétés width, height et line-height changent lorsqu’une action donnée provoque un changement d’état.

Le pseudo-sélecteur indique que les valeurs des propriétés width, height et height du bouton augmentent quand l’utilisateur passe sur ce dernier avec la souris et appelle l’état hover (survol).

CSS (Normal)

#button3 {
  ...
  width: 400px;
  height: 100px;
  line-height: 60px;
  transition-property:
       width, height, line-height;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0;
}

CSS (Survol)

#button3:hover {
  width: 420px;
  height: 120px;
  line-height: 80px;
}

Définissez les styles dans la feuille CSS pour modifier les couleurs du fond et du texte du bouton.

Le code CSS du bouton à l’état normal attribue la valeur almost white à la propriété background-color et la valeur gray à la propriété color du texte. La propriété transition-property de la même règle CSS indique que les propriétés background-color et color changent lorsqu’une action donnée provoque un changement d’état.

Le pseudo-sélecteur indique que les valeurs des propriétés border-color et color du bouton s’inversent lorsque l’utilisateur passe sur ce dernier avec la souris et appelle l’état hover (survol).

CSS (Normal)

#button4 {
  background-color:#f4f4f4;
  color: #73746B;
  transition-property:
     background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-delay: 0;
}

CSS (Survol)

#button4:hover {
  background-color:#73746B;
  color: #f4f4f4;
}

Cliquez sur Aperçu dans le navigateur et choisissez le navigateur dans lequel vous souhaitez visionner le résultat.

Enregistrez les fichiers pour visualiser les modifications.