bouton de fermeture HTML

Bouton de fermeture HTML : comment ajouter un bouton de fermeture élégant à votre page Web

Dans la conception Web, le bouton de fermeture est un élément courant qui offre du confort aux visiteurs et les aide à quitter facilement une page ou une application lorsque vous avez fini de naviguer. Dans cet article, nous allons vous montrer comment créer un bouton de fermeture élégant en utilisant HTML et CSS, et comment l'associer à l'événement de fermeture d'une page Web via JavaScript.

Première étape : Créer un élément HTML

La première étape de la création d'un bouton de fermeture HTML consiste à créer un élément HTML. Nous utiliserons un élément bouton et ajouterons des styles personnalisés pour le faire ressembler à un bouton de fermeture. Par exemple, nous pouvons utiliser du code HTML de base :

<button class="close-btn">关闭</button>

Cela créera un bouton simple où "Fermer" est le texte sur le bouton.

Étape 2 : Ajouter des styles CSS

Ensuite, nous ajouterons des styles CSS personnalisés pour embellir le bouton. Nous pouvons utiliser la propriété CSS box-shadow pour lui donner un effet tridimensionnel, et la propriété border-radius pour créer des coins arrondis. Nous pouvons utiliser le code CSS suivant :

.close-btn {
  background-color: #444;
  border: none;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
}

Cela créera un bouton de fermeture avec des coins arrondis de 3 px et un effet d'ombre.

Étape 3 : Ajouter des événements JavaScript

Enfin, nous devons associer le bouton de fermeture à l'événement de fermeture de la page. Nous pouvons utiliser JavaScript pour effectuer cette tâche. Lorsque l'utilisateur clique sur le bouton de fermeture, nous pouvons utiliser la fonction window.close() pour fermer la fenêtre ou l'onglet actuellement ouvert. Par exemple :

document.querySelector('.close-btn').addEventListener('click', function() {
  window.close();
});

Ajoutez simplement ce code au fichier JavaScript de la page web. Désormais, lorsque l'utilisateur clique sur le bouton de fermeture, la page Web se ferme automatiquement.

Summary

Dans cet article, nous avons créé un bouton de fermeture élégant en utilisant HTML, CSS et JavaScript. Ce bouton fonctionne sur une variété de pages Web et d'applications différentes pour aider les visiteurs à quitter facilement la page. À mesure que la conception Web progresse, les boutons de fermeture deviendront de plus en plus courants et les concepteurs pourront utiliser différents styles et techniques pour créer leurs propres boutons de fermeture.

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!