Réaliser des effets de remplissage en CSS sur un bloc ou encore un bouton… rien de plus simple ! La méthode consiste à créer un lien avec une taille définie qui servira à créer le conteneur. Il suffit ensuite d’ajouter un élément à l’intérieur de ce lien, qui lui, servira à appliquer l’effet sur ce conteneur.

Créez d’abord un paragraphe contenant simplement un lien avec une classe pour définir les propriétés du bloc (taille, couleur, …). Cela donne le code suivant :

<p><a class="jauge" href="#"></a></p>

Ajoutez ensuite à l’intérieur du lien un élément span qui servira à créer l’effet de remplissage au passage de la souris. Ajoutez également une classe pour gérer sa couleur, sa position de départ et aussi le type de transition. Vous obtenez le code suivant :

<p><a class="jauge" href="#"><span class="jauge-remplissage"></span></a></p>

Maintenant que l’on a créé notre conteneur et notre élément servant à gérer notre effet de remplissage, appliquons leurs un peu de CSS. Commençons par le conteneur, on va lui appliquer le style suivant :

.jauge {
    width: 100px;
    height: 200px;
    display: block;
    background-color: #303030;
    position: relative;
}

Appliquez au conteneur une position relative car l’élément span sera en position absolue par rapport au conteneur. Définissez l’élément a comme étant un bloc et attribuez lui une largeur et une hauteur. Appliquez également une couleur de fond, ici un fond gris foncé. Passons maintenant à notre élément span.

/* Remplissage de bas en haut */
.jauge-remplissage {
    transition: all 0.3s linear 0s;
    background-color: #33BEE5;
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: 0;
}

.jauge:hover .jauge-remplissage {
    height: 100%;
}

Appliquez à cet élément un beau fond bleu turquoise 🙂 et donnez-lui une position absolue. Pour cet exemple, l’effet doit partir du bas vers le haut, pour cela définissez un bottom et left à 0. J’aurais pu tout aussi bien mettre right à la place du left, il sert juste à dire que l’effet commencera au bord du bloc, que cela soit à gauche ou à droite n’ a pas d’importance dans cette exemple, à vous de voir ce que vous préférez. Sachez que pour certains effets, il sera forcément à gauche ou à droite et ça sera le bottom qui pourra être remplacé par un top. La propriété width et height changera aussi suivant les effets désirés. Ici nous voulons que l’effet soit du bas vers le haut et que cela prenne tout le bloc. Définissez donc width à 100%, ce qui permet de prendre la totalité du bloc et height à 0 pour ne pas être visible.
La propriété transition est utilisée pour donner l’effet de remplissage voulu, pour savoir comment l’utiliser, voir le site W3.org. En gros, ici on applique la transition à toutes les propriétés de .jauge-remplissage compatible (couleur de fond, …) avec elle, la durée de la transition est de 0.3 seconde et est de type linéaire. La transition démarre à 0 seconde (donc immédiatement, on peut aussi lui appliquer une valeur plus grande pour retarder l’effet). Au passage de la souris sur le bloc, on définit la propriété height à 100%, pour remplir entièrement le bloc.
Découvrez une liste d’effets en démonstration.
Vous pouvez créer d’autres effets en ajoutant des éléments span dans votre conteneur, la seule limite est votre imagination. 😉

Démonstration