css Effet de clic sur bouton CSS

[katorze]

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 !

 

[Cascadeur]

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]

Hey Cascadeur !

Merci beaucoup j'ai trouvé comment faire avec un petit tuto et les 3 conseils que tu m'as donné
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)

<button class="test">CLIC</button>

.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 !

 

[Nicolas]

 

[Bertrand G]

Ha ouais pas mal du tout, et juste du CSS.
Avec un petit transition-duration ça pourrait faire un petit effet "smooth" sur le retour du clic

 

[Audrey]

Excellent !
Peut-être un peu lourd pour tous les boutons sur un site mais pour un bouton de téléchargement ça le fait.
Très bonne idée le transition-duration, réglé à 0.5s ça rend bien sur le clic.

 

[-Mathieu-]

Bonjour,

Comment lier un lien au bouton ?
Si je veux que le clic redirige vers une page de téléchargement d'un fichier par exemple ?

 

[c-cadeau]

Si je dis pas de bêtise

<div class="centre">
  <button href="url_vers_ton_fichier" title="mon fichier" class="test">bouton clic</button>
</div>

avec un target="_blank" si tu veux que ça ouvre dans un nouvel onglet