wake-up-neo.com

So gestalten Sie eine angeklickte Schaltfläche in CSS

Ich habe mir die W3 Schools Website W3Schools angesehen, die das Styling von Buttons mit CSS erklärt. Ich muss einen Schaltflächenstil angeben, wenn er angeklickt wird. Was ist der Pseudo-Klassenselektor dafür? z.B. Der Hover-Button ist: 

.button:hover{ 
}
htmlcsscss3
3
user7945230

Diese Schaltfläche erscheint zunächst gelb. Beim Schweben wird es orange. Wenn Sie darauf klicken, wird es rot angezeigt. Ich habe verwendet: hover und: focus, um den Stil anzupassen . (Der: aktive Selektor wird normalerweise für Links verwendet (d. H. <a>-Tags).) 

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

Wenn Sie möchten, dass die Schaltfläche bei gedrückter Maustaste anders gestaltet wird, können Sie die Pseudo-Klasse :active verwenden.

.button:active {
}

Wenn Sie andererseits möchten, dass der Stil nach dem Klicken beibehalten wird, müssen Sie Javascript verwenden.

4
Alexandros Panagiotakis

Es gibt drei Schaltflächen

  • Normal: Sie können wie folgt auswählen button
  • Hover: Sie können wie folgt auswählen button:hover
  • Gedrückt/Geklickt: Sie können wie folgt auswählen button:active

Normal: 

.button
 {
     //your css
 }

Aktiv 

 .button:active
{
        //your css
}

Schweben 

 .button:hover
{
        //your css
}

SNIPPET:

Verwenden Sie :active, um den aktiven Status der Schaltfläche zu gestalten.

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

3
Nadir Laskar

button: hover bewegt sich, wenn Sie den Cursor über die Schaltfläche bewegen.
Try button: active statt ... funktioniert auch für andere Elemente

button:active{
  color: red;
}

0
priyank bhardwaj

Leider gibt es keinen: click Pseudo Selector. Wenn Sie das Styling beim Klicken ändern möchten, sollten Sie Jquery/Javascript verwenden. Für reines HTML/CSS ist es sicherlich besser als der "Hack". Aber wenn Sie darauf bestehen ...

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>

Wenn Sie möchten, können Sie den Stil umschalten: 

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