:active

.joinBtn {
  width: 10em;
  height: 5ex;
  background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}

.joinBtn:active {
  box-shadow: 2px 2px 5px #fc894d;
}

Would you like to subscribe to our channel?
Subscribe

Die :active Pseudoklasse wird häufig auf - und -Elementen verwendet. Weitere häufige Ziele dieser Pseudoklasse sind Elemente, die in einem aktivierten Element enthalten sind, und Formularelemente, die über ihr zugehöriges aktiviert werden.

Stile, die durch die :active Pseudoklasse definiert sind, werden durch jede nachfolgende linkbezogene Pseudoklasse (:link, :hover oder :visited) überschrieben, die mindestens die gleiche Spezifität aufweist. Um Links korrekt zu gestalten, platzieren Sie die :active Regel nach allen anderen linkbezogenen Regeln, gemäß der LVHA-Reihenfolge: :link — :visited — :hover — :active.

Hinweis: Bei Systemen mit Mehrtastenmäusen gibt CSS an, dass die :active Pseudoklasse nur auf die primäre Taste angewendet werden muss; bei rechtshändigen Mäusen ist dies typischerweise die linke Taste.

HTML

  This paragraph contains a link:
  This link will turn red while you click on it.
  The paragraph will get a gray background while you click on it or the link.

CSS

/* Unvisited links */
a:link {
  color: blue;
}
/* Visited links */
a:visited {
  color: purple;
}
/* Hovered links */
a:hover {
  background: yellow;
}
/* Active links */
a:active {
  color: red;
}

/* Active paragraphs */
p:active {
  background: #eee;
}

Ergebnis

HTML

  My button: 
  Try Clicking Me or My Label!

CSS

form :active {
  color: red;
}

form button {
  background: white;
}

Ergebnis

• Link-bezogene Pseudoklassen: :link, :visited, und :hover