Wie erstelle ich einen schaltflächenähnlichen Effekt mit einer Stiländerung bei der Veröffentlichung in CSS?

Pressed Button Selector

In CSS können Sie die :active-Pseudoklasse verwenden, um Elemente zu formatieren, die gerade angeklickt und gehalten werden. Dieses Verhalten ist jedoch nicht ideal für Schaltflächen, da sich der Stil der Schaltfläche nur ändert, während sie gedrückt gehalten wird.

Um den gewünschten Effekt zu erzielen, dass sich der Stil der Schaltfläche nach dem Drücken und Loslassen ändert, können Sie eine verwenden Tag anstelle einer Schaltfläche:

CSS:

<code class="css">a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}</code>

HTML:

<code class="html"><a id="btn" href="#btn">Demo</a></code>

Dieser Code erstellt einen Link, der sich wie eine Schaltfläche verhält. Wenn auf den Link geklickt wird, ändert sich sein Stil in Grün. Wenn Sie dann die Maustaste loslassen, ändert sich der Stil des Links in Rot.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen schaltflächenähnlichen Effekt mit einer Stiländerung bei der Veröffentlichung in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!