Fermer le bouton CSS

Le bouton Fermer est utilisé pour fermer n'importe quelle fenêtre, fenêtre contextuelle, alerte, fichier ou document que nous avons ouvert. En appuyant sur ou en cliquant sur le bouton Fermer, nous fermons la fenêtre ou le document dans lequel nous travaillons. Il est également connu sous le nom de bouton de sortie. Nous créons ce bouton Close en utilisant HTML et CSS qui sont utilisés dans nos sites Web. Ici, dans ce guide, nous vous expliquerons comment créer et styliser le bouton Fermer en utilisant HTML et CSS.

Exemple 1:
Nous allons créer le fichier HTML pour concevoir notre bouton Fermer. Le fichier CSS sera créé dans lequel nous allons styliser notre bouton Close. Nous utilisons le code Visual Studio pour tous ces. Lorsque nous créons le fichier HTML, dans le code Visual Studio, nous écrivons le code dans ce fichier. Nous devons enregistrer le fichier HTML avec l'extension de fichier de «.HTML »et le fichier CSS avec l'extension de«.CSS ». Essayons le code donné:

Le code ci-dessus est le code HTML, donc voici le type de ce document mentionné comme «HTML». Nous utilisons des balises dans HTML, nous devons donc ouvrir des étiquettes de «» et «». La méta est définie dans la balise «» et elle définit «Charset = UTF-8». En utilisant cela, nous pouvons utiliser de nombreux caractères. Pour un lien vers le fichier CSS, nous utilisons le «» ici et le «rel» décrit la relation. Le «HREF» est pour donner le nom du fichier CSS que nous devons rejoindre avec ce fichier HTML. Nous lions le «Buttonstyle.Fichier CSS en utilisant "".

Maintenant, fermez le «» et ouvrez la balise «». La classe «» est là pour la séparation des données du Web. Nous devons concevoir le bouton dans ce fichier HTML. Le type de bouton est «bouton» et la classe est nommée «BTN-Close». Ensuite, ouvrez «» et cette classe Span est définie avec le nom «Icon-Cross». Le «& Time» affichera le «X» pour le bouton Fermer. Fermer "", "", "
et «» tags.

Code CSS:

Dans le codage CSS, nous donnons du style à notre bouton de clôture que nous avons créé dans le fichier HTML. Tout d'abord, mentionnez la classe de bouton qui est «BTN-Close». Placer un point avant ce «BTN-Close» et le support ouvert. Définissez «marge», «bordure» et «rembourrage» sur «0». Comme la marge est pour créer l'espace, la bordure est pour créer la bordure autour du bouton. Le rembourrage est destiné à créer des espaces entre les éléments, nous définissons donc tout cela comme «0».

Nous voulons appliquer le «noir» comme couleur de fond, donc nous placons «arrière-plan: noir» ici. La «couleur» décrit la couleur de la police ou de la croix. Le «rayon de la frontière» s'est ajusté à «20%». La largeur décrit la largeur du bouton de fermeture qui est «40px» et la hauteur est également «40px». «L'affichage» est «flex», il réglera donc la longueur flexible sur l'affichage. La propriété «Flex-Flow» est appliquée ici à la «colonne Nowrap». Nous devons justifier le contenu au centre. Ainsi, la ligne «Justify-Content: Center» le justifiera au centre. Alignez également les articles sur le centre. Sélectionnez le «curseur» comme «pointeur». La transition est appliquée car elle contrôlera la vitesse lorsque la propriété CSS change. Il est défini comme «les 150 ms».

Pour la sortie, nous devons utiliser le navigateur. Nous pouvons utiliser n'importe quel navigateur. Nous avons installé un navigateur en appuyant sur «Ctrl + Shift + X» et en installant «Ouvrir dans le navigateur». Ensuite, pour rendre la sortie, nous appuyons sur «Alt + B» et la sortie sera affichée et le bouton apparaît sur l'écran qui est illustré ci-dessous.

Ici, vous pouvez voir que nous créons un bouton de fermeture simple. Dans les prochains exemples, nous créerons plus d'un bouton de fermeture et les concevrons en utilisant différentes couleurs et formes dans CSS.

Exemple n ° 2:
Dans cet exemple, nous allons créer plus d'un bouton de fermeture et appliquer différentes couleurs à ces boutons de fermeture. Créez les boutons de fermeture dans le fichier HTML.

Dans ce fichier HTML, nous créons plusieurs boutons de fermeture à l'aide de la balise «». Nous avons nommé la classe du bouton comme «bouton» pour créer le premier bouton. Ensuite, mettez un symbole «x» qui est affiché comme le caractère proche «x». Nous avons nommé la deuxième classe de bouton "Button Button2". Le nom de classe du troisième bouton est "Button Button3". Et les quatrième et cinquième boutons sont nommés "Button Button4" et "Button Button5", respectivement. Nous devons fermer la balise de bouton à chaque ligne.

Code CSS:

Dans la première ligne, placez un point, puis tapez le nom du premier bouton qui est «bouton» ici et commencez à concevoir le bouton. La couleur du «fond» du premier bouton de fermeture est «# 4CAF50» qui est le code de couleur verte, donc le premier bouton de fermeture apparaîtra vert. La «couleur» suivante est pour régler la couleur du «X» à «blanc».

Maintenant, le «rembourrage» est «15px» vertical, et la verticale «32px» est appliquée. Le «Text-Align» est défini sur le «Centre». Nous n'avons pas de texte écrit dans le bouton Fermer, nous avons donc définie la propriété «Text-Decoration» sur «Aucun». Le «Display» en tant que «bloc en ligne» est pour afficher un conteneur à blocage en ligne. Corrigez la «taille de police» à «16px». Et les marges verticales sont «4px» et la marge horizontale est «2px». «Pointer» est utilisé comme un «curseur».

Maintenant, nous voulons modifier les couleurs d'arrière-plan du bouton restant, nous ajoutons donc simplement la couleur d'arrière-plan aux boutons restants. Fermez le support du premier bouton. Mettez un point et le nom du deuxième bouton et définissez la couleur d'arrière-plan. Le code de la couleur d'arrière-plan est «# 008CBA» qui s'affiche comme «bleu». Changez la couleur de tous les boutons avec la même propriété et enregistrez-la. Voir la sortie, tous les boutons fermés sont de différentes couleurs.

Exemple # 3:
Nous utilisons notre fichier HTML précédent que nous avons créé dans l'exemple 2 et modifions simplement le code CSS. Ensuite, appliquez différentes formes sur le bouton Close ici dans cet exemple.

Code CSS:

Nous avons réglé la couleur d'arrière-plan du premier bouton comme «vert». Le rembourrage est «20px» et cela s'appliquera aux quatre côtés. La «taille de police» est changée en «16px». La marge est «4px» verticale et «2px» horizontal. La nouvelle propriété que nous avons ajoutée dans les boutons restants est la propriété «Border-Radius». Cela changera les coins du bouton en forme ronde. Et appliquez également différentes couleurs à tous les boutons.

Le «Border-Radius» pour le premier bouton est défini comme «2px» et la couleur de son «fond» est «rouge». Le deuxième bouton «Border-Radius» est «4px» et le «Color en arrière-plan» est «bleu». Les troisième, quatrième et cinquième boutons «Border-Radius» sont respectivement «8px», «12px» et «50%». De plus, les couleurs de l'arrière-plan de ces boutons sont respectivement «jaune», «violet» et «orange»,. Vérifiez la sortie et voyez comment ces boutons de fermeture apparaissent sur le navigateur.

Dans la sortie ci-dessus, vous pouvez remarquer que les coins des boutons de fermeture sont arrondis. Tous les boutons fermés sont de différentes formes. Le dernier bouton de fermeture est un bouton de fermeture en forme de cercle. Nous appliquons tous ces styles dans notre fichier CSS.

Conclusion:

Ce guide vous est fourni pour savoir comment créer le bouton Fermer dans HTML et CSS. Ici, nous avons conçu et stylé différents boutons de fermeture. Nous avons également fourni le code HTML et CSS et la sortie de tous les codes également. Vous avez appris l'utilisation de HTML et CSS dans ce guide et vous pourrez créer les boutons de clôture chaque fois que vous en avez besoin dans vos projets ou sites Web. Nous avons également expliqué les codes ici et avons démontré trois exemples différents pour vous.