Bouton HTML masqué : utilisez CSS pour masquer et afficher les boutons

Dans le développement Web, masquer les boutons est une exigence très courante. Parfois, nous devons masquer certaines actions et les afficher en cas de besoin au lieu d'occuper l'espace de la page tout le temps. Dans ce cas, nous pouvons utiliser CSS pour masquer et afficher le bouton.

Voici un moyen d'y parvenir :

1. Ajoutez une balise "bouton caché" en HTML

<button class="hide-btn">隐藏按钮</button>

2. Utilisez CSS pour définir le style et les propriétés du bouton

.hide-btn {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  cursor: pointer;
}

Le code CSS ci-dessus définit le style et les propriétés du bouton. position par rapport à la page De plus, la largeur, la hauteur, la transparence et le style du pointeur de la souris sont également définis. Ces propriétés rendent le bouton invisible sur la page, mais toujours cliquable.

3. Créer un contrôleur qui affiche un bouton

<button class="show-btn">显示按钮</button>

Ce bouton est cliquable par l'utilisateur, et lorsque l'utilisateur clique dessus déclenchera l'affichage du label "bouton caché".

4. Définissez le style et le comportement du contrôleur

.show-btn {
  cursor: pointer;
}

var hideBtn = document.querySelector('.hide-btn');
var showBtn = document.querySelector('.show-btn');

showBtn.addEventListener('click', function() {
  hideBtn.style.position = 'static';
});

Ici, nous ajoutons un événement de clic au bouton du contrôleur lorsque l'utilisateur clique dessus, définissons la position de l'étiquette "bouton caché" sur statique, afin qu'elle apparaisse. dans La page est en ligne.

5. Ajouter des effets d'animation (facultatif)

Si vous souhaitez rendre l'apparition et la disparition de ce bouton plus fluide, nous pouvons utiliser des effets d'animation CSS. Par exemple, lorsque l'utilisateur clique sur "Afficher le bouton", laissez l'étiquette "Masquer le bouton" apparaître en fondu :

.hide-btn {
  ...
  transition: opacity 1s;
}

.hide-btn.visible {
  opacity: 1;
}

showBtn.addEventListener('click', function() {
  hideBtn.classList.add('visible');
});

Ici, nous utilisons l'attribut de transition CSS pour définir l'effet de transition d'une valeur d'opacité à une autre valeur d'opacité. . Dans le même temps, nous avons également créé une classe .visible Lorsque l'utilisateur clique sur le "Afficher le bouton", nous l'ajoutons au libellé "Masquer le bouton", ce qui déclenchera l'effet de transition en CSS.

Résumé

Il est très simple d'utiliser CSS pour masquer et afficher des boutons. Il suffit de définir la position de l'étiquette "bouton caché" en dehors de la page, puis d'utiliser un contrôleur pour changer sa position, ou d'utiliser des effets d'animation CSS pour la faire apparaître et disparaître plus facilement. Cette méthode est non seulement pratique et pratique, mais n’a également aucun impact sur les performances et la vitesse de chargement de la page.

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!