Définir le bouton HTML

Introduction

Lors du développement d'applications Web, il est souvent nécessaire de présenter un panneau de paramètres aux utilisateurs afin que ceux-ci puissent modifier les paramètres de l'application en fonction de leurs besoins. Le panneau des paramètres contient généralement plusieurs options, telles que changer le thème, régler le volume, etc. Cet article vous montrera comment créer un bouton de paramètres de base en utilisant HTML et CSS.

Marquage HTML

Tout d'abord, nous devons créer un bouton en HTML et définir son style sur "Définir le bouton". Nous pouvons créer des boutons en utilisant l'élément "button" dans le code HTML.

Paramètres

Styles CSS

Nous devons maintenant ajouter des styles CSS à l'élément bouton afin que son apparence corresponde à celle d'un bouton de paramètres typique. Nous pouvons utiliser des sélecteurs de classe CSS pour ajouter des styles à nos éléments de bouton.

.settings-button {
background-color: #ffffff;
border: none;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
couleur : Dans le style CSS ci-dessus, nous avons utilisé les propriétés et valeurs suivantes :

background-color : #ffffff - Définit la couleur d'arrière-plan du bouton sur blanc.

border: none; - Supprime les bordures.

border-radius : 50% ; - Définit le rayon de la bordure du bouton à 50 %, le rendant circulaire.

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); - Ajoutez une ombre de boîte pour rendre le bouton plus tridimensionnel.

couleur : #484848 ; - Définissez la couleur du texte du bouton sur gris.

cursor: pointer; - Définit le curseur pour qu'il pointe vers la main.

font-size : 24px ; - Définissez la taille de la police sur 24px.

hauteur : 60 px ; - Définissez la hauteur du bouton sur 60 pixels.

width : 60px ; - Définissez la largeur du bouton sur 60px.

position : fixe ; - Définissez la méthode de positionnement du bouton sur "fixe".

bottom : 20px ; - Définit le bord inférieur du bouton à 20 pixels du bas de la fenêtre.

right : 20px ; - Définit le bord droit du bouton à 20 pixels du côté droit de la fenêtre.

Fonction JavaScript

Maintenant, nous devons ajouter un gestionnaire d'événements utilisant JavaScript pour afficher le panneau de paramètres lorsque l'utilisateur clique sur le bouton. Nous pouvons utiliser le code suivant pour répondre à cette exigence.

const settingsButton = document.querySelector(".settings-button");

const settingsPanel = document.querySelector(".settings-panel");

settingsButton.addEventListener("click", () => {

settingsPanel.classList.toggle("open");

});

Dans le code, nous recherchons d'abord notre bouton de paramètres et les éléments du panneau de paramètres dans le DOM. Ensuite, nous ajouterons un gestionnaire d'événements de clic pour le bouton de paramètres. Dans le gestionnaire d'événements, nous appliquons une classe "open" au panneau de paramètres afin qu'il apparaisse dans la vue de l'utilisateur. Si l'utilisateur clique à nouveau sur le bouton des paramètres, nous appliquerons la classe "close" pour masquer le panneau des paramètres.

Conclusion

En utilisant HTML, CSS et JavaScript, nous avons créé un simple bouton de paramètres qui offre aux utilisateurs un moyen de modifier les paramètres de l'application. Ce bouton peut être redimensionné et coloré avec du CSS personnalisé pour s'adapter à n'importe quelle application ou site Web. Avec des boutons comme celui-ci, les utilisateurs peuvent facilement modifier les paramètres de l'application en fonction de leurs besoins et préférences.

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!