Bouton Javascript Css

| | | | | | | |

Lors de la conception d`un site Web, vous aurez souvent un bouton que vous souhaitez qu`il apparaisse d`une certaine manière. Par exemple, vous pouvez souhaiter qu`un bouton ait une couleur d`arrière-plan par rapport aux autres éléments de la page pour attirer l`attention de l`utilisateur sur le bouton.

Avec CSS, les développeurs peuvent créer des boutons avec des styles. Le CSS vous permet de changer entre autres.

la couleur, la taille du texte, la bordure, la largeur et la hauteur d`un bouton, Ce tutoriel expliquera, avec des exemples, comment utiliser une série de propriétés CSS pour styliser un HTML bouton. Lorsque vous aurez fini de lire ce didacticiel, vous serez un expert dans le style des boutons à l`aide de CSS.

Présentation des boutons

Vous pouvez définir un bouton de plusieurs façons HTML. Les deux approches les plus courantes sont Trouvez votre match Bootcamp

Notre code renvoie :

Screen Shot 2020 03 25 A 08.33.23

Notre bouton a la même taille qu`avant, mais maintenant la taille des caractères à l`intérieur est de 20 px. Nous avons utilisé l`attribut de taille de police pour définir la taille du texte de notre bouton.

Remplissage

Lors de la conception d`un bouton, vous pouvez décider que vous voulez un certain espace entre le texte à l`intérieur d`un bouton et les murs extérieurs du bouton. C`est là que la propriété de rembourrage entre en jeu.

La propriété de rembourrage utilise des indicateurs de longueur (px, em et ainsi de suite) ou des valeurs de pourcentage ‚Äã‚Äãpour définir une certaine quantité d`espace entre les boutons de texte et ses bordures.

Supposons que nous voulions créer deux boutons sur notre page. Un bouton doit avoir un rembourrage de 40px et l`autre devrait avoir un rembourrage de 20 px. Nous pouvons créer ces boutons en utilisant le code suivant :

Notre code renvoie :

 Capture d`écran 2020 03 25 to 08.39.39

Vous pouvez utiliser la propriété border-radius pour créer des boutons rectangulaires avec des coins arrondis. Voici trois exemples de code qui utilisent la propriété border-radius. Pour illustrer l`effet de différentes tailles de rayon, chaque exemple utilise un rayon de bordure de taille différente.

Notre code renvoie :

Capture d`écran 2020 03 25 to 08.57.09

Dans cet exemple, nous avons ajouté une ombre à notre bouton. Les paramètres que nous avons spécifiés pour notre ombre sont les suivants :