Comment puis-je assombrir les boutons en survol à l'aide de CSS ?

Amélioration de l'assombrissement des boutons avec CSS

Lorsque vous survolez les boutons, il est courant d'améliorer leur impact visuel en assombrissant légèrement leur couleur d'arrière-plan. Bien qu'il soit possible de déterminer manuellement un code hexadécimal plus sombre, cela peut être fastidieux.

Entrez la technique Shadowy de CSS

Une alternative simple consiste à superposer une image d'arrière-plan sombre sur votre bouton en utilisant image d’arrière-plan. Cette approche préserve la couleur du texte du bouton tout en affectant uniquement l'arrière-plan :

.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);
}

Cela ajoute un dégradé linéaire noir d'opacité de 40 % au-dessus du bouton, l'assombrissant efficacement au survol. Le code résultant :

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

Ainsi, la prochaine fois que vous aurez besoin d'assombrir l'arrière-plan d'un bouton au survol, adoptez les capacités de projection d'ombres de CSS pour une solution légère et personnalisable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!