Come applicare stili ai pulsanti

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Per applicare stili a un controllo button, puoi usare molte proprietà e pseudoclassi CSS. Questo argomento descrive alcune delle proprietà e delle pseudoclassi usate più spesso. Offre anche un esempio di come usare la classe CSS win-backbutton, disponibile in WinJS.

Cosa sapere

Tecnologie

• App di Windows Store in JavaScript
• WinJS

Prerequisiti

• Guida introduttiva: Aggiunta di un pulsante

Proprietà CSS utili

CSS offre molte proprietà che puoi usare per applicare stili agli elementi HTML. Ma l'elenco di queste proprietà è lungo e scorrerlo tutto può essere scoraggiante. Ecco un breve elenco delle proprietà CSS particolarmente utili per l'applicazione di stili al controllo button.

• font-family
  Specifica il tipo di carattere da usare per il testo del pulsante. Questo esempio imposta font-family su "Segoe UI Light".

  <button id="fontFamilyButton" style="font-family: 'Segoe UI Light'">A button</button>
  

• font-size
  Specifica la dimensione del tipo di carattere da usare per il testo del pulsante. Puoi usare molti formati diversi, ad esempio una dimensione assoluta, una dimensione relativa, un valore di lunghezza assoluto o una percentuale. Per altre informazioni, vedi il riferimento font-size.

  Questo esempio imposta font-family su 20 punti.

  <button id="fontSizeButton" style="font-family: 'Segoe UI Light'; font-size: 20pt">A button</button>
  

• color
  Specifica il colore del testo del pulsante.

  Questo esempio mostra alcuni modi per impostare la proprietà 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
  Specifica il colore della superficie del pulsante.

  Questo esempio mostra alcuni modi per impostare la proprietà 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
  Specifica lo spessore, lo stile del contorno e il colore del bordo del pulsante.

  Questo esempio crea un bordo di 2 pixel in tinta unita intorno al pulsante.

  <button id="borderButton" style="border: 2px solid rgb(255, 20, 147);">A button</button>
  

Tieni presente che questo non è un elenco completo di tutte le opzioni a tua disposizione. Per un elenco completo di tutte le proprietà CSS, vedi Informazioni di riferimento sui fogli di stile CSS.

Pseudoelementi per l'applicazione di stili ai controlli pulsante

Il controllo button non contiene alcun pseudoelemento a cui applicare stili.

Pseudoclassi per l'applicazione di stili ai controlli pulsante

Questo controllo supporta le seguenti pseudoclassi che puoi usare come selettori per applicare uno stile al controllo quando si trova in stati specifici.

• :hover
  Applica stili a un controllo button quando l'utente posiziona il cursore su button ma non ha ancora attivato il controllo facendovi clic.

  Questo esempio definisce uno stile per un button al passaggio del mouse.

  #hoverButton:hover {
      background-color: deeppink;
  }
  

  <button id="hoverButton">A button</button>
  

• :active
  Applica stili a un controllo button quando è attivo. Il controllo button è attivo tra il momento in cui l'utente lo preme e il momento in cui lo rilascia. Se l'utente preme il controllo e trascina il puntatore lontano dal pulsante, il controllo rimane attivo fino al rilascio del puntatore da parte dell'utente.

  Questo esempio modifica il colore di sfondo di un controllo button attivo.

  #activeButton:active {
      font-weight: bold;
      border-color: deeppink;
  }
  

  <button id="activeButton">A button</button>
  

• :focus
  Applica stili a un controllo button quando si trova nello stato attivo. Puoi assegnare lo stato attivo a un controllo button in diversi modi:

  • Designa button con un dispositivo di puntamento.
  • Passa a button usando i tasti TAB e MAIUSC+TAB.
  • Seleziona il button mediante un keyboard shortcut.

  Questo esempio modifica il colore di sfondo di un button quando il button riceve lo stato attivo.

  #focusButton:focus {
     background-color: #ffc;
  }
  

  <button id="focusButton">A button</button>
  

• :disabled
  Applica stili a un controllo button quando è disabilitato. Per disabilitare un pulsante, aggiungi l'attributo disabled al codice HTML o imposta la proprietà disabled su true in JavaScript.

  Questo esempio disabilita un pulsante e definisce uno stile per il pulsante.

  #disabledButton:disabled {
     border-style: dotted;
  }
  

  <button id="disabledButton" disabled>A button</button>
  

Per altre info sui vari modi in cui puoi combinare pseudoclassi e altri selettori, vedi Informazioni sui selettori CSS.

Classi CSS di WinJS

WinJS contiene classi CSS che puoi usare per applicare stili a determinati controlli. Per il controllo button, puoi usare la classe win-backbutton. Applica a button l'aspetto di un pulsante di spostamento, che ti permette di tornare alla posizione precedente.

Nota  Per usare questa classe, la pagina deve contenere un riferimento a uno dei fogli di stile di WinJS. Per altre informazioni, vedi il documento relativo ai fogli di stile di WinJS.

 

Questo esempio usa la classe win-backbutton per applicare a button lo stile di un pulsante di spostamento.

<button id="backButton" class="win-backbutton"></button>

L'uso di questa classe applica a button l'aspetto seguente:

Argomenti correlati

Esempi di controlli essenziali HTML

Guida introduttiva: Aggiunta di un pulsante

Linee guida ed elenco di controllo per i pulsanti