Comment appliquer un style à des boutons
[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Il existe un grand nombre de propriétés et de pseudo-classes CSS que vous pouvez utiliser pour appliquer un style à un objet button. Cette rubrique décrit certaines des propriétés et pseudo-classes les plus couramment utilisées. Elle fournit également un exemple d’utilisation de la classe CSS win-backbutton, qui est fournie par WinJS.
Ce que vous devez savoir
Technologies
Prérequis
Propriétés CSS utiles
CSS fournit un grand nombre de propriétés que vous pouvez utiliser pour appliquer un style à des éléments HTML. Mais la liste de ces propriétés est longue et il peut sembler décourageant de toutes les parcourir. Voici une liste réduite des propriétés CSS qui sont particulièrement utiles pour appliquer un style au contrôle button.
font-family
Spécifie la police à utiliser pour le texte du bouton. L’exemple suivant affecte à la propriété font-family la valeur "Segoe UI Light".<button id="fontFamilyButton" style="font-family: 'Segoe UI Light'">A button</button>font-size
Spécifie la taille de la police à utiliser pour le texte du bouton. Vous pouvez utiliser plusieurs formats différents, tels qu’une taille absolue, une taille relative, une valeur de longueur absolue ou un pourcentage. Pour plus d’informations, voir les informations de référence sur la propriété font-size.L’exemple suivant affecte à la propriété font-family la valeur « 20 points ».
<button id="fontSizeButton" style="font-family: 'Segoe UI Light'; font-size: 20pt">A button</button>color
Spécifie la couleur du texte du bouton.L’exemple suivant présente plusieurs façons de définir la propriété color.
<button id="pinkButton1" style="color: DeepPink">A button</button> <button id="pinkButton2" style="color: #FF1493">A button</button> <button id="pinkButton3" style="color: rgb(255, 20, 147);">A button</button>background-color
Spécifie la couleur de la face du bouton.L’exemple suivant présente plusieurs façons de définir la propriété background-color.
<button id="backgroundButton1" style="background-color: Black">A button</button> <button id="backgroundButton2" style="background-color: #000000">A button</button> <button id="backgroundButton3" style="background-color: rgb(0, 0, 0);">A button</button>border
Spécifie l’épaisseur, le style de ligne et la couleur de la bordure du bouton.L’exemple suivant crée une bordure unie de 2 pixels autour du bouton.
<button id="borderButton" style="border: 2px solid rgb(255, 20, 147);">A button</button>
(Notez que ce n’est pas une liste complète de tout ce que vous pouvez utiliser. Pour obtenir la liste complète de toutes les propriétés CSS, voir les informations de référence sur les feuilles de style en cascade (CSS).)
Pseudo-éléments pour appliquer un style aux contrôles bouton
Le contrôle button ne comporte aucun pseudo-élément auquel appliquer un style.
Pseudo-classes pour appliquer un style aux contrôles bouton
Ce contrôle prend en charge les pseudo-classes suivantes que vous pouvez utiliser comme sélecteurs pour appliquer un style au contrôle lorsqu’il se trouve dans certains états.
:hover
Applique des styles à un contrôle button lorsque l’utilisateur place le curseur sur l’objet button mais qu’il ne l’a pas activé en cliquant dessus.L’exemple suivant définit un style pour un objet button dans l’état « pointage ».
#hoverButton:hover { background-color: deeppink; }<button id="hoverButton">A button</button>:active
Applique des styles à un contrôle button lorsqu’il est actif. L’objet button est actif entre le moment où l’utilisateur appuie sur le contrôle et le moment où il le relâche. Si l’utilisateur appuie sur le contrôle et fait glisser le pointeur hors du bouton, le contrôle reste actif jusqu’à ce que l’utilisateur relâche le pointeur.L’exemple suivant modifie la couleur d’arrière-plan d’un objet button actif.
#activeButton:active { font-weight: bold; border-color: deeppink; }<button id="activeButton">A button</button>:focus
Applique des styles à un contrôle button lorsqu’il a le focus. Il existe plusieurs façons de donner le focus à un objet button :- Désignez l’objet button à l’aide d’un dispositif de pointage.
- Naviguez jusqu’à l’objet button à l’aide des touches Tab et Maj+Tab.
- Sélectionnez l’objet button à l’aide d’une propriété keyboard shortcut.
L’exemple suivant modifie la couleur d’arrière-plan d’un objet button lorsque cet objet button reçoit le focus.
#focusButton:focus { background-color: #ffc; }<button id="focusButton">A button</button>:disabled
Applique des styles à un contrôle button lorsqu’il est désactivé. Pour désactiver un bouton, ajoutez l’attribut disabled à son code HTML ou affectez la valeur true à la propriété disabled en JavaScript.L’exemple suivant désactive un bouton et définit un style pour celui-ci.
#disabledButton:disabled { border-style: dotted; }<button id="disabledButton" disabled>A button</button>
(Pour plus d’informations sur les différentes façons de combiner des pseudo-classes et d’autres sélecteurs, voir Présentation des sélecteurs CSS.)
Classes CSS WinJS
WinJS fournit des classes CSS que vous pouvez utiliser pour appliquer un style à certains contrôles. Pour le contrôle button, il y a la classe win-backbutton. Elle donne au contrôle button l’apparence d’un bouton de navigation qui vous permet de revenir à l’emplacement précédent.
Remarque Pour utiliser cette classe, votre page doit contenir une référence à l’une des feuilles de style WinJS. Pour plus d’informations, voir Feuilles de style de la Bibliothèque Windows pour JavaScript.
L’exemple suivant utilise la classe win-backbutton pour donner à un contrôle button le style d’un bouton de navigation.
<button id="backButton" class="win-backbutton"></button>
L’utilisation de cette classe permet de donner à un contrôle button l’apparence suivante.
.png "Bouton qui utilise la classe win-backbutton")
Rubriques associées
Exemple de contrôles essentiels HTML