Termes CSS clés employés : ::after, box-shadow, border-radius, transition, :active
Compatibilité navigateurs : IE10+, Firefix16.0+, Chrome26+, Safari avec préfixe, Opera12.1+.
Faire en sorte qu’un bouton semble s’enfoncer lors d’un clic dessus.
Cela demande simplement un pseudo-élément ::after complété d’un léger effet de
déplacement vers le bas en cas de clic, géré par la pseudo-classe :active.
Le code HTML ne pourrait pas être plus simple :
<a href="#" class="bouton">Texte du bouton</a>
Nous définissons dans le code CSS d’abord le bouton. Outre le code décoratif, remarquez la transition.
a.bouton {
display: inline-block;
background: rgb(30,100,30);
color: white;
font: bold 1.5rem Arial;
position: relative;
top: 0;
bottom: -12px;
margin-bottom: 12px;
padding: 10px 15px;
border-radius: 8px/15px;
transition: all 0.2s ease-in-out;
}
Puis le pseudo-élément ::after,
conférant l’aspect 3D, placé à l’arrière-plan grâce à z-index :
a.bouton:after {
content: "";
position: absolute;
display: inline-block;
border-radius: 8px/15px;
z-index: -1;
bottom: inherit;
left: 0;
width: 100%;
height: 100%;
background: rgb(10, 70, 10);
box-shadow: 1px 0 3px grey;
}
Enfin, en cas de clic, le bouton change légèrement de couleur et s’abaisse un peu, masquant son relief :
a.bouton:active {
background: rgb(30,120,30);
top: 12px;
bottom: 0;
}
|
|---|