Taille du bouton CSS

Cet article passera en revue le concept de la taille du bouton dans l'approche de style CSS. Comme nous le savons, le bouton par défaut est de petite taille et n'est pas visible. Ainsi, nous utiliserons le CSS de deux manières distinctes pour augmenter la taille du bouton et la modifier sur un effet comme l'effet de survol. Tous ces exemples seront réalisés dans l'environnement du bloc-notes ++.

Exemple 01:

Dans cet exemple, nous utiliserons la largeur et la propriété de hauteur pour l'élément bouton pour augmenter sa taille. Nous utiliserons l'approche de la balise de style CSS dans cet exemple pour ajouter plusieurs propriétés. Tout d'abord, nous examinerons la taille par défaut de l'élément bouton présent dans un fichier html.

Comme nous pouvons le voir dans le script donné, nous n'avons pas modifié la taille du bouton. Dans la sortie suivante, nous pouvons voir que la taille du bouton est très petite et n'est pas possible pour une page Web.

Alors, maintenant nous ajoutons le style au bouton. Tout d'abord, nous ouvrons la balise de tête du fichier. Dans cette balise, la balise de style pour CSS est appelée. Dans cette balise, nous ajoutons toutes les propriétés de l'élément bouton. Nous écrivons toutes les propriétés de l'élément bouton à l'intérieur de la parenthèse de la classe de bouton. Tout d'abord, nous définissons la couleur d'arrière-plan sur «Jaune». Ensuite, nous définissons la largeur au format Pixel sur «100px». Enfin, nous avons réglé la hauteur au format Pixel sur «30px». Nous fermons les étiquettes de style et de tête une fois que tout le formatage est complet. Ensuite, nous allons à l'étiquette corporelle. Nous écrivons le titre de la page à l'aide de la balise H1 dans la balise corporelle, puis ouvrons la balise du bouton. La classe de la balise de style est appelée dans la balise de bouton. Après cela, nous fermons la balise de bouton avec le texte qui s'affiche sur le bouton entre les deux, ainsi que la balise corporelle.

Comme expliqué précédemment, nous avons ajouté le code dans le script précédent. Maintenant, nous ouvrons ce nouveau script sur notre navigateur après l'avoir enregistré dans le bon format.

Dans la sortie donnée, nous pouvons voir que le bouton a toute la mise en forme, y compris la taille que nous avons spécifiée dans la classe de style dans l'en-tête de fichier.

Exemple 02: Utilisation de CSS en ligne pour modifier la taille d'un bouton dans un fichier HTML

Dans cet exemple, nous utiliserons le CSS en ligne pour modifier la taille de l'élément de bouton par défaut d'un fichier HTML. Toutes les propriétés de style seront attribuées à l'intérieur de la balise de bouton. Il s'agit d'une méthode non conventionnelle pour ajouter CSS à n'importe quel élément et ne sera associée qu'à l'élément actuel.

Comme nous pouvons le voir dans l'extrait précédent, nous avons directement passé au corps du fichier car tout le contenu serait dans la balise corporelle. Tout d'abord, nous ouvrons la balise H1 pour écrire une tête pour la page, puis la fermer. Ensuite, nous ouvrons la balise du bouton. Dans cette balise, nous appelons l'attribut de style par son mot-clé. Après cela, nous écrivons toutes les propriétés de l'élément de bouton dans les virgules inversées et les séparons en utilisant le caractère semi-parlé. Tout d'abord, nous attribuons la couleur d'arrière-plan, «jaune». Ensuite, nous attribuons la largeur au format Pixel. En fin de compte, nous attribuons la hauteur, également au format Pixel. Après cela, nous fermons la balise de bouton avec le texte entre les deux, qui apparaîtra sur le bouton. Et fermer l'étiquette corporelle avec. Maintenant, nous enregistrons ce fichier dans le «.Format HTML »et ouvrez-le sur notre navigateur pour obtenir le résultat suivant:

Comme nous pouvons le voir dans la sortie de notre script, le cap et le bouton de l'étiquette corporelle sont visibles. Le bouton a toutes les valeurs définies dans la balise, y compris la hauteur et la largeur.

Exemple 03: Augmenter la taille d'un bouton lorsqu'il plane avec notre curseur dans un fichier HTML

Dans cet exemple, nous utiliserons les propriétés de largeur et de hauteur de l'élément bouton pour l'agrandir, uniquement lorsque le pointeur est au-dessus. Dans cet exemple, nous utiliserons les balises de style CSS pour ajouter de nombreux attributs et effets à l'élément bouton.

Dans cet exemple, nous personnalisons le bouton à l'aide des balises de style CSS. Tout d'abord, nous ouvrons la balise de tête du fichier. Et puis, nous appelons la balise de style CSS à partir de là. Nous ajoutons tous les attributs de l'élément bouton dans cette balise. À l'intérieur de la parenthèse de la classe de bouton, nous entrons toutes les propriétés de l'élément bouton; Dans cet exemple, nous définissons la couleur d'arrière-plan sur «Jaune."Ensuite, nous ouvrons une classe de bouton qui hérite d'une méthode appelée" planant ". Dans cette fonction, nous effectuons ce qui suit: nous définissons la largeur au format pixel sur «100px» et définissons la hauteur au format pixel sur «30px». Après avoir terminé la mise en forme, nous fermons le style et les étiquettes de tête. Ensuite, nous allons à l'étiquette corporelle. Nous utilisons la balise H1 pour créer le titre de la page dans la balise corporelle, puis ouvrons la balise du bouton. La balise de bouton utilise la classe à partir de la balise de style et a le texte qui apparaît sur le bouton entre les deux. Après cela, nous fermons la balise de bouton et la balise corporelle.

Comme nous pouvons le voir dans la sortie précédente, la taille et la couleur d'arrière-plan ont changé lorsque nous avons plané sur le bouton avec notre curseur. En effet.

Exemple 04: Utilisation de la taille de la police pour améliorer la taille d'un bouton à l'aide de CSS

Dans cet exemple, nous opterons sur une méthode différente pour modifier la taille d'un bouton. La propriété de taille de police sera utilisée pour augmenter la taille d'un bouton en utilisant la balise de style CSS.

Tout d'abord, nous ouvrons la balise de style dans l'en-tête de fichier et créons une classe de style pour le bouton. Dans cette classe, nous attribuons une couleur d'arrière-plan au bouton. Après cela, nous attribuons également la taille de la police. Dans ce cas, il est défini sur «25px». Ensuite, nous fermons respectivement la classe et les étiquettes de style et de tête. Ensuite, la balise corporelle a une rubrique et une balise de bouton qui contiennent la classe de balise de style héritée dedans. Après cela, nous fermons les balises et enregistrons le fichier pour l'ouvrir sur notre navigateur.

Dans l'écran de sortie, nous pouvons voir que le bouton a une taille accrue par rapport au bouton par défaut que le HTML fournit en raison de la modification de la propriété de taille de police.

Conclusion

Dans cet article, nous avons discuté de la taille de l'élément bouton présent dans la langue de balisage hypertexte. Le bouton par défaut a une très petite taille qui rend difficile la navigation sur une page Web. Nous avons donc utilisé les différentes approches dans CSS comme l'étiquette de style et l'approche CSS en ligne. La propriété la plus courante utilisée pour modifier la taille est la largeur et la propriété de hauteur d'un bouton. Nous avons discuté de ce concept et mis en œuvre sur le bloc-notes++. Nous avons également mis en œuvre l'approche de taille de police pour augmenter la taille d'un bouton.