Comment régler la taille du bouton

Le "»Élément aide les utilisateurs à générer des événements ou à prendre des mesures. Les boutons peuvent également être utilisés pour soumettre le formulaire et obtenir des informations. Les utilisateurs peuvent ajouter n'importe quel type de bouton à la page Web, y compris les boutons ronds, les carrés, les rectangles et bien d'autres. De plus, les utilisateurs peuvent également définir la taille du bouton en utilisant CSS "hauteur" et "largeur«Propriétés en fonction de leur choix.

Cet article indiquera:

• Comment faire / créer un bouton dans HTML?
• Comment régler la taille du bouton en HTML à l'aide des propriétés CSS?

Comment faire / créer un bouton dans HTML?

Pour faire un bouton, tout d'abord, faites un «div”Conteneur en utilisant le""Tag et insérant un"identifiant»Attribut avec une valeur spécifique. Ensuite, ajoutez un "”Élément et incorporez du texte à afficher dessus:

Soumettre

On peut observer que le bouton a été créé avec succès:

Comment régler la taille du bouton en HTML à l'aide des propriétés CSS?

Pour définir la taille du bouton, suivez la procédure mentionnée.

Étape 1: Conteneur de style «div»

Tout d'abord, accédez au «identifiant«Attribut à l'aide du«#"Selecteur et le nom d'identification"size btn". Ensuite, appliquez les propriétés ci-dessous pour le style:

# btn-size
marge: 50px 150px;
hauteur: 100px;
Largeur: 100px;
rembourrage: 40px;
Border: 3px RVB solide (23, 8, 228);
Color en arrière-plan: RVB (245, 191, 111);

Ici:

• Le "marge«La propriété est utilisée pour allouer l'espace en dehors de la frontière de l'élément.
• "hauteur»Définit la taille de la hauteur de l'élément.
• "largeur»Définit la taille de la largeur de l'élément.
• "rembourrage"Alloue de l'espace à l'intérieur de la frontière de l'élément.
• "frontière«Est utilisé pour définir une frontière autour de l'élément.
• "Couleur de l'arrière plan”Est ​​utilisé pour régler la couleur d'arrière-plan sur l'élément défini.

Sortir

Étape 2: Réglez la taille du bouton

Maintenant, accédez au «”Élément à l'aide du nom de la balise et appliquez les propriétés suivantes pour définir la taille du bouton:

bouton
Color en arrière-plan: RVB (127, 235, 145);
Couleur: RVB (184, 130, 238);
Largeur: 100px;
hauteur: 80px;
Border-Radius: 30%;

Dans le code ci-dessus:

• Le "Couleur de l'arrière plan”Est ​​utilisé pour définir la couleur d'arrière-plan du bouton.
• "couleur»Spécifie la couleur du texte.
• "largeur”Est ​​utilisé pour définir la largeur du bouton. Par exemple, nous avons spécifié la valeur de largeur comme «100px".
• "hauteur"Définit la hauteur du bouton comme"80px"
• "rayon frontalier»La propriété définit les coins de l'élément arrondis:

Étape 3: Appliquez la propriété «: Sover» sur le bouton

Maintenant, appliquez le «:flotter»Pseudo-classe avec l'élément de bouton pour ajouter l'effet de survol sur le bouton:

Bouton: Hover
Color en arrière-plan: RVB (16, 185, 190);

On peut remarquer que l'effet de survol est ajouté au bouton qui modifie la couleur du bouton.

Conclusion

Pour définir la taille du bouton, créez d'abord un bouton à l'aide du "" élément. Ensuite, accédez au bouton dans CSS par nom de balise et appliquez le «hauteur" et "largeur»Propriétés CSS pour régler sa taille. De plus, les utilisateurs peuvent également appliquer d'autres propriétés CSS, notamment «couleur""rame" et "Couleur de l'arrière plan”Pour le style. Ce message a démontré la procédure de définition de la taille du bouton.