css Effet de clic sur bouton CSS

katorze

Nouveau membre
Hey tout le monde ! Je viens de m'inscrire et me voilà avec ma première question :
Comment faire un effet de clic "genre physique" sur un bouton en CSS ?

Avec hover j'arrive à faire un petit effet de surélévation mais là c'est le contraire que je voudrais, comme si on appuyait physiquement sur le bouton (bouton enfoncé).
C'est pour une page sur un intranet d'une petite entreprise et on ne peut pas écrire du javascript sur ce petit réseau c'est bloqué au niveau des afficheurs.

Thank you !
 
Solution
Hey Cascadeur !

Merci beaucoup j'ai trouvé comment faire avec un petit tuto et les 3 conseils que tu m'as donné (y)
Je mets le code ici si ça peut servir à quelqu'un d'autre, l'effet de clic est super bien fait. (ici il y a aussi un effet sur le :hover)
HTML
<button class="test">CLIC</button>
CSS
.test {
    padding: 15px 25px;
    font-size: 20px;
    background-color: #3498db;
    border: none;
    color: #fff;
    border-radius: 15px;
    box-shadow: 0 9px #2980b9;
    outline: none;
}
.test:hover {
    box-shadow: 0 6px #2980b9;
    transform: translateY(3px);
}
.test:active {
    box-shadow: 0 2px #2980b9;
    transform: translateY(7px);
}

Merci et à bientôt !

Cascadeur

Membre
avec hover j'arrive à faire un petit effet de surélévation
Salut katorze, hover ne permet pas de modifier le bouton mais simplement de préciser une condition de l'élément concerné (ici passage du pointeur de la souris).
Tu parles surement de box-shadow pour ton effet de surélevé (ombre portée).

Pour arriver à tes fins, tu peux utiliser box-shadow oui mais sans effet de blur (3e paramètres en px). Et utiliser également le sélecteur :active (CSS :active Selector) pour déclencher des propriétés CSS lors du clic sur un élément, transform (CSS transform property) par exemple ;)

Je ne sais pas si tu veux le code direct ou qu'on te montre le chemin mais avec box-shadow, :active et transform tu n'es pas loin du compte !
 

katorze

Nouveau membre
Hey Cascadeur !

Merci beaucoup j'ai trouvé comment faire avec un petit tuto et les 3 conseils que tu m'as donné (y)
Je mets le code ici si ça peut servir à quelqu'un d'autre, l'effet de clic est super bien fait. (ici il y a aussi un effet sur le :hover)
HTML
<button class="test">CLIC</button>
CSS
.test {
    padding: 15px 25px;
    font-size: 20px;
    background-color: #3498db;
    border: none;
    color: #fff;
    border-radius: 15px;
    box-shadow: 0 9px #2980b9;
    outline: none;
}
.test:hover {
    box-shadow: 0 6px #2980b9;
    transform: translateY(3px);
}
.test:active {
    box-shadow: 0 2px #2980b9;
    transform: translateY(7px);
}

Merci et à bientôt !
 
Dernière modification par un modérateur:

Ces discussions pourraient vous intéresser...

Bonjour à tous, J'essaie de déployer une application sur mon serveur live via Docker mais j'ai du faire une mauvaise configuration car l'application s'est installé en local. Il y a un fichier à configurer : docker-compose.yml notamment cette section server: image...
Bonsoir, j'ai fait une recherche sur le forum et je crois que personne n'en a encore parlé, j'ai trouvé un site pas mal lorsque j'ai installé easyPHP (qui est maintenant Webserver) : KodeShot. Cela permet de créer des captures d'écrans d'extrait de code. Vous tapez votre code, vous...
Yo ! J'ai une div sans bordure remplie de cellules horizontales auxquelles j'applique une bordure sur le bord bas pour les séparer entre elles. Le problème c'est que la dernière je ne veux pas de bordure basse puisqu'il n'y a plus de cellule sous elle. Je n'ai pas la main sur le HTML...
Haut