:active
Correspond à l’élément au moment de son activation, le plus souvent quand le bouton de la souris est enfoncé sur un bouton ou un lien.
Exemple
#.btn {
box-shadow: 0 4px 0 #4c1d95;
transition: transform 0.08s, box-shadow 0.08s;
}
.btn:active {
transform: translateY(4px);
box-shadow: 0 0 0 #4c1d95;
}<button class="btn" type="button" style="padding: 10px 18px; border: 0; border-radius: 10px; background: #7c3aed; color: #fff; font: 600 15px system-ui, sans-serif; cursor: pointer;">Commencer la leçon</button>Appuyez sur le bouton et maintenez : il descend, et l’ombre dessous disparaît, comme une vraie touche.
Définition et utilisation
#La pseudo-classe :active dure très peu de temps : du moment où le bouton de la souris est enfoncé (ou l’écran touché) jusqu’à son relâchement. C’est l’instant de la pression, donc elle convient à un effet d’enfoncement physique, par exemple un léger rétrécissement ou un déplacement vers le bas.
On l’utilise le plus souvent pour les boutons et les liens. Pour l’utilisateur, c’est la confirmation que le clic a été remarqué, avant même que la page ne réagisse autrement.
L’ordre des règles compte. :active doit venir après :hover, car pendant le clic les deux états s’appliquent à la fois, et à spécificité égale c’est la règle la plus récente qui gagne. D’où l’ordre bien connu pour les liens : :link, :visited, :hover, :active.
Syntaxe
#sélecteur:active { propriété: valeur; }Effets de pression
#- Le bouton se rétrécit légèrement, comme une touche enfoncée. Appuyez et maintenez.
- Une ombre intérieure donne l’impression que le bouton s’enfonce.
- Un assombrissement au moment du clic. Fonctionne avec n’importe quelle couleur de fond.
- Survolez d’abord, puis cliquez. La règle
:activeest placée plus bas, donc pendant le clic elle l’emporte sur:hover.
Effets de pression en pratique
#scale(0.95)
.demo:active { transform: scale(0.95); }inset box-shadow
.demo:active {
box-shadow: inset 0 3px 8px rgb(0 0 0 / 0.5);
}brightness(0.8)
.demo:active { filter: brightness(0.8); }:hover, puis :active
:active est placée plus bas, donc pendant le clic elle l’emporte sur :hover..demo:hover { background: #6d28d9; }
.demo:active { background: #4c1d95; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Faites de l’effet
:activequelque chose de court et subtil, avec une transition d’environ 50 à 100 ms. Une animation plus longue n’aura pas le temps de se montrer, car le bouton est vite relâché. - Placez
:activeaprès:hoverdans la feuille de style, sinon à spécificité égale l’effet de clic sera masqué.
Entrées associées
#- :hoverCorrespond à l’élément survolé par le curseur de la souris. La base des effets de survol sur les boutons, les liens et les cartes.
- :focusCorrespond à l’élément qui a le focus, c’est-à-dire qui reçoit actuellement la saisie au clavier, par exemple un champ de formulaire cliqué.
- :focus-visibleCorrespond à un élément ayant le focus seulement quand le navigateur juge que l’indicateur doit être visible, par exemple lors d’une navigation au clavier.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.