web-dev-qa-db-fra.com

Comment styliser un bouton cliqué en CSS

J'ai consulté le site Web des écoles W3 W3Schools qui explique les boutons de style avec CSS. J'ai besoin de spécifier un style de bouton quand on clique dessus. Quel est le sélecteur de pseudo-classe pour cela? par exemple. le bouton de survol est: 

.button:hover{ 
}
htmlcsscss3
3
user7945230

Ce bouton apparaîtra jaune au début. En vol stationnaire, il deviendra orange. Lorsque vous cliquez dessus, il deviendra rouge. J'ai utilisé: hover et: focus pour adapter le style . (Le sélecteur: actif est généralement utilisé pour les liens (tags <a>)) 

button{
  background-color:yellow;
}

button:hover{background-color:orange;}

button:focus{background-color:red;}

a {
  color: orange;
}

a.button{
  color:green;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:active {
  color: blue;
}
<button>
Hover and Click!
</button>
<br><br>

<a href="#">Hello</a><br><br>
<a class="button" href="#">Bye</a>

11
Rachel Gallen

Si vous souhaitez simplement que le bouton ait un style différent alors que la souris est enfoncée, vous pouvez utiliser la pseudo-classe :active.

.button:active {
}

Si par contre vous voulez que le style reste après que vous ayez cliqué, vous devrez utiliser javascript.

4
Alexandros Panagiotakis

Il y a trois états de bouton

  • Normal: Vous pouvez sélectionner comme ceci button
  • Survolez: vous pouvez sélectionner comme ceci button:hover
  • Appuyé/cliqué: vous pouvez sélectionner comme ceci button:active

Ordinaire: 

.button
 {
     //your css
 }

Actif 

 .button:active
{
        //your css
}

Survolez 

 .button:hover
{
        //your css
}

SNIPPET:

Utilisez :active pour styler l'état actif du bouton.

button:active{
   background-color:red;
}
<button>Click Me</button>

3
Nadir Laskar

bouton: le survol est juste au moment où vous déplacez le curseur sur le bouton.
Try bouton: active à la place ... fonctionnera également pour d'autres éléments

button:active{
  color: red;
}

0
priyank bhardwaj

Malheureusement, il n'y a pas: cliquez sur le pseudo sélecteur. Si vous souhaitez modifier le style au clic, vous devez utiliser Jquery/Javascript. C'est certainement mieux que le "hack" pour du HTML/CSS pur. Mais si vous insistez ...

input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
  background: #444;
  color: #fff;
}
  <label for="input">
  <input id="input" type="radio" />
  <span>NO JS styling</span>
  </label>

Ou, si vous préférez, vous pouvez changer le style: 

input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
  background: #444;
  color: #fff;
}
  <label for="input">
  <input id="input" type="checkbox" />
  <span>NO JS styling</span>
  </label>

0
Chesswithsean