Een aangeklikte knop in CSS opmaken

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>

Antwoord 2, autoriteit 38%

Als je wilt dat de knop een andere stijl heeft terwijl de muis wordt ingedrukt, kun je de pseudo-klasse :activegebruiken.

.button:active {
}

Als je daarentegen wilt dat de stijl blijft staan nadat je erop hebt geklikt, moet je javascript gebruiken.

Antwoord 3, autoriteit 31%

Er zijn drie statussen van de knop

• Normaal: u kunt op deze manier button

selecteren

• Hover: u kunt op deze manier button:hover

. selecteren

• Ingedrukt/geklikt: u kunt op deze manier button:active

. selecteren

Normaal:

.button
 {
     //your css
 }

Actief

.button:active
{
        //your css
}

Hover

.button:hover
{
        //your css
}

SNIPPET:

Gebruik :activeom de actieve status van de knop te stylen.

button:active{
   background-color:red;
}

<button>Click Me</button>

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>

button:active{
  color: red;
}