Sommaire

Les boutons de fermeture

Foundation propose un bouton spécial pour les interfaces nécessitant une case de fermeture.

Voici le code HTML/CSS utilisé dans cet exemple :

<div class="callout"> 
  <button class="close-button" aria-label="Case de fermeture" type="button"> 
  <span aria-hidden="true">&times;</span> 
  </button> 
  <h4>Fermer ce message d’alerte</h4> 
  <p>Maecenas faucibus mollis interdum...</p> 
</div>

Le fichier de cet exemple à télécharger est : Chapitre 08 / 08-bouton-f.html.

Voici l’affichage :

images/C08-005.png

La classe .callout permet juste d’avoir une bordure sur la boîte <div>.

C’est la classe .close-button appliquée au bouton qui permet l’affichage en haut à droite de la case de fermeture. Le symbole de croix est affiché avec l’entité de caractère &times;.

Voici les propriétés de la classe .close-button :

.close-button { 
  position: absolute; 
  color: #8a8a8a; 
  right: 1rem; 
  top: 0.5rem; 
  font-size: 2em; 
  line-height: 1; 
  cursor: pointer; 
}