fermer le bouton CSS

Comment implémenter un beau bouton de fermeture CSS

Le bouton de fermeture est un élément très basique, mais il existe de nombreuses façons de le faire ressortir dans la conception de votre site Web ou de votre application. Dans cet article, nous explorerons quelques astuces CSS pour créer des boutons de fermeture magnifiques et accrocheurs.

1. Définissez un style de base

Pour la plupart des boutons de fermeture, vous devrez utiliser un élément div rond pour créer la forme de base. Vous pouvez ensuite le styliser en utilisant du CSS, par exemple :

.close {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

Cela créera un bouton de fermeture rond de 16 pixels avec une couleur de fond grise. Notez que nous avons également ajouté une propriété CSS de pointeur pour modifier le style du pointeur de la souris afin que l'utilisateur puisse voir que cet élément est cliquable.

2. Ajouter une icône de fermeture

Pour rendre le bouton de fermeture plus reconnaissable, vous pouvez ajouter une forme "x" standard. Vous pouvez créer cette forme en utilisant CSS pour générer un pseudo-élément, par exemple :

.close::before, .close::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 10px;
  background-color: #fff;
}

.close::before {
  transform: rotate(45deg);
}

.close::after {
  transform: rotate(-45deg);
}

Cela ajoutera un signe "x" haut et bas au bouton de fermeture, ce qui facilitera son identification. .

3. Ajouter des actions interactives

Lorsque l'utilisateur déplace la souris sur le bouton de fermeture, vous souhaiterez peut-être ajouter des effets interactifs pour augmenter sa visibilité Opérabilité. Par exemple, vous pouvez utiliser une animation de transition CSS pour ajouter un effet de couleur :

.close:hover {
  background-color: #aaa;
  transition: background-color 0.2s ease-in-out;
}

Cela changera la couleur d'arrière-plan lorsque la souris survole le bouton de fermeture, en utilisant une animation de transition de 0,2 seconde pour créer l'effet de couleur. changement de couleur en douceur.

4. Adaptez-vous à différents scénarios

En plus du bouton de fermeture circulaire de base, vous devrez peut-être également en créer un pour des scénarios spécifiques dans votre application Un autre style. Par exemple, dans une fenêtre modale, vous souhaiterez peut-être un bouton de fermeture plus grand afin que les utilisateurs puissent le trouver facilement. Vous pouvez utiliser quelques astuces CSS de base pour créer différents styles.

.close-modal {
  font-size: 24px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.close-modal::before, .close-modal::after {
  content: "";
  position: absolute;
  height: 3px;
  width: 18px;
  background-color: #fff;
}

.close-modal::before {
  transform: rotate(45deg);
  top: 13px;
}

.close-modal::after {
  transform: rotate(-45deg);
  top: 13px;
}

Cela créera un bouton de fermeture plus grand et plus proéminent et changera la couleur de l'icône en blanc pour une identification plus facile.

Résumé

Le bouton de fermeture est un élément essentiel dans toute application, mais vous pouvez utiliser des astuces CSS pour le faire ressortir. En créant un style de base et en y ajoutant de l'interactivité, vous pouvez créer un bouton de fermeture puissant et accrocheur. Il peut être ajusté et modifié selon les besoins pour s'adapter à différents scénarios et cas d'utilisation.

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!