Dans ce tutoriel, je vais vous présenter comment créer et personnaliser un dégradé (gradient en anglais) en CSS pour votre

Les dégradés en CSS

Le terme "hover" signifie "survoler" en anglais. Cela définit ce qu'il va se passer quand l'utilisateur passe la souris sur

Comprendre le :hover en CSS

CSS3

HTML/CSS

Le terme "hover" signifie "survoler" en anglais. Cela définit ce qu'il va se passer quand l'utilisateur passe la souris sur un élément comme un lien ou un bouton. Cela permet d'ajouter des animations à son site afin de le rendre plus attractif, esthétique.

#### Utilisation du :hover

Dans un premier temps, nous allons utiliser le hover afin de changer la couleur d'un lien quand la souris le survol.

**HTML :**

```html
<a href="#">Ceci est un lien</a>
```

**CSS :**

```css
a {
    color: red;
}
a:hover {
    color: blue;
}
```
Dans ce cas, le lien va devenir bleu au lieu de rouge.

![Alt text](https://i.imgur.com/eDbq31V.png)
Et au survol :
![Alt text](https://i.imgur.com/IbnkKgN.png)
Pratique !

<data>NE PAS SUPPRIMER CETTE LIGNE!</data>

Pour un rendu plus esthétique, il existe les **transitions**.
Cela permet justement d'effectuer une transition entre les deux états (ici rouge et bleu) pour un rendu plus esthétique.

Exemple :

**CSS :**

```css
a {
    color: red;
    transition: all 0.5s;
}
a:hover {
    color: blue;
}
```

Ici la transition se fera en une demie-seconde.
Naturellement, ceci ne sont que des exemples d'utilisation afin de comprendre le fonctionnement. Il peut être utiliser avec toute sorte d'éléments.

**Pour aller plus loin, voici quelques liens menants à des exemples d'animations utilisants la propriété hover :**
[Exemple de lien](https://codepen.io/duboujnou/pen/VwWLzwE)
[Exemple avec un bouton](https://codepen.io/duboujnou/pen/dyRoRxq)


Une liste d'astuces pour embellir votre site internet !