Wie kann ich Schaltflächen beim Hover mithilfe von CSS abdunkeln?

Verbesserung der Schaltflächenabdunkelung mit CSS

Wenn Sie mit der Maus über Schaltflächen fahren, ist es üblich, deren visuelle Wirkung durch eine leichte Abdunklung der Hintergrundfarbe zu verstärken. Das manuelle Ermitteln eines dunkleren Hex-Codes ist zwar machbar, kann aber mühsam sein.

Nutzen Sie die Shadowy-Technik von CSS

Eine mühelose Alternative besteht darin, mithilfe von ein dunkles Hintergrundbild über Ihre Schaltfläche zu legen Hintergrundbild. Dieser Ansatz behält die Textfarbe der Schaltfläche bei und wirkt sich nur auf den Hintergrund aus:

.button {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color: red;
}

.button:hover {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

Dadurch wird oben auf der Schaltfläche ein schwarzer linearer Farbverlauf mit einer Deckkraft von 40 % hinzugefügt, der sie beim Schweben effektiv abdunkelt. Der resultierende Code:

<div class="button"> some text </div>
<div class="button">

Wenn Sie also das nächste Mal den Hintergrund einer Schaltfläche beim Hover abdunkeln müssen, nutzen Sie die Schattenwurffunktionen von CSS für eine leichte und anpassbare Lösung.

Das obige ist der detaillierte Inhalt vonWie kann ich Schaltflächen beim Hover mithilfe von CSS abdunkeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!