Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Creazione e Stile dei Pulsanti | Creazione di Componenti di Base
Tailwind CSS per lo Sviluppo Web

bookCreazione e Stile dei Pulsanti

I pulsanti sono elementi interattivi fondamentali nel web design. Tailwind CSS offre una varietà di utility per stilizzare i pulsanti in modo efficace e gestire i loro diversi stati, come hover, focus e active.

Stile di base del pulsante

Per stilizzare un pulsante di base, è possibile utilizzare utility per il colore di sfondo, il colore del testo, il padding, il bordo arrotondato e il peso del font.

index.html

index.html

copy

Spiegazione

  1. bg-yellow-500: Imposta il colore di sfondo su una tonalità di blu;
  2. text-white: Imposta il colore del testo su bianco;
  3. font-bold: Rende il testo in grassetto;
  4. py-2: Aggiunge padding verticale (0,5rem o 8px);
  5. px-4: Aggiunge padding orizzontale (1rem o 16px);
  6. rounded: Aggiunge angoli leggermente arrotondati.

Stato Hover

Per modificare l'aspetto di un pulsante quando l'utente ci passa sopra con il mouse, è possibile utilizzare il prefisso hover: con qualsiasi classe utility.

index.html

index.html

copy

hover:bg-blue-700: Cambia il colore di sfondo in blu scuro quando il pulsante viene passato sopra con il mouse.

Stato Focus

Per stilizzare un pulsante quando è in stato di focus (ad esempio, quando viene selezionato tramite tastiera), è possibile utilizzare il prefisso focus: con qualsiasi classe utility.

index.html

index.html

copy

In questo esempio, quando si passa il cursore del mouse su un pulsante, esso diventa blu. Se si utilizza il tasto Tab, il pulsante diventerà rosso.

Stati attivo e disabilitato

Gli stati attivo e disabilitato vengono utilizzati meno frequentemente. Tuttavia, è importante considerarli.

Per stilizzare un pulsante quando è attivo (ad esempio, quando viene cliccato), è possibile utilizzare il prefisso active: con qualsiasi classe utility.

Per stilizzare un pulsante quando è disabilitato (ad esempio, quando non può essere interagito), è possibile utilizzare il prefisso disabled: con qualsiasi classe utility.

index.html

index.html

copy

Spiegazione

  1. active:bg-green-800: Cambia il colore di sfondo in una tonalità di verde più scura quando il pulsante è attivo (premuto);
  2. opacity-50: Riduce l'opacità del pulsante per farlo apparire disabilitato;
  3. cursor-not-allowed: Modifica il cursore per indicare che il pulsante non è cliccabile;
  4. Attributo disabled: Lo rende non interattivo.

Esempio di Tutti gli Stati

Combinazione di tutti gli stati in un unico esempio

index.html

index.html

copy

Spiegazione

  1. bg-blue-500: Imposta il colore di sfondo predefinito;
  2. hover:bg-blue-700: Cambia il colore di sfondo al passaggio del mouse;
  3. focus:outline-none: Rimuove il contorno di focus predefinito;
  4. focus:ring-2: Aggiunge un bordo di focus con larghezza di 2 pixel;
  5. focus:ring-blue-600: Imposta il colore dell'anello di focus;
  6. focus:ring-opacity-50: Imposta l'opacità dell'anello di focus;
  7. active:bg-blue-800: Cambia il colore di sfondo quando il pulsante è attivo;
  8. text-white: Imposta il colore del testo su bianco;
  9. font-bold: Rende il testo in grassetto;
  10. py-2: Aggiunge padding verticale;
  11. px-4: Aggiunge padding orizzontale;
  12. rounded: Aggiunge angoli leggermente arrotondati.

Nota

Se hai bisogno di approfondire il componente Button di Tailwind, ecco un link alla documentazione ufficiale.

1. Come si cambia il colore di sfondo di un pulsante quando si passa il mouse sopra?

2. Quale classe utility rimuove il contorno di focus predefinito di un pulsante?

3. Quale classe utility modifica il colore di sfondo di un pulsante quando è attivo (premuto)?

question mark

Come si cambia il colore di sfondo di un pulsante quando si passa il mouse sopra?

Select the correct answer

question mark

Quale classe utility rimuove il contorno di focus predefinito di un pulsante?

Select the correct answer

question mark

Quale classe utility modifica il colore di sfondo di un pulsante quando è attivo (premuto)?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 1

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Can you explain how to combine multiple states for a button in Tailwind?

What are some best practices for accessible button design with Tailwind?

Can you show more examples of custom button styles using Tailwind?

Awesome!

Completion rate improved to 3.57

bookCreazione e Stile dei Pulsanti

Scorri per mostrare il menu

I pulsanti sono elementi interattivi fondamentali nel web design. Tailwind CSS offre una varietà di utility per stilizzare i pulsanti in modo efficace e gestire i loro diversi stati, come hover, focus e active.

Stile di base del pulsante

Per stilizzare un pulsante di base, è possibile utilizzare utility per il colore di sfondo, il colore del testo, il padding, il bordo arrotondato e il peso del font.

index.html

index.html

copy

Spiegazione

  1. bg-yellow-500: Imposta il colore di sfondo su una tonalità di blu;
  2. text-white: Imposta il colore del testo su bianco;
  3. font-bold: Rende il testo in grassetto;
  4. py-2: Aggiunge padding verticale (0,5rem o 8px);
  5. px-4: Aggiunge padding orizzontale (1rem o 16px);
  6. rounded: Aggiunge angoli leggermente arrotondati.

Stato Hover

Per modificare l'aspetto di un pulsante quando l'utente ci passa sopra con il mouse, è possibile utilizzare il prefisso hover: con qualsiasi classe utility.

index.html

index.html

copy

hover:bg-blue-700: Cambia il colore di sfondo in blu scuro quando il pulsante viene passato sopra con il mouse.

Stato Focus

Per stilizzare un pulsante quando è in stato di focus (ad esempio, quando viene selezionato tramite tastiera), è possibile utilizzare il prefisso focus: con qualsiasi classe utility.

index.html

index.html

copy

In questo esempio, quando si passa il cursore del mouse su un pulsante, esso diventa blu. Se si utilizza il tasto Tab, il pulsante diventerà rosso.

Stati attivo e disabilitato

Gli stati attivo e disabilitato vengono utilizzati meno frequentemente. Tuttavia, è importante considerarli.

Per stilizzare un pulsante quando è attivo (ad esempio, quando viene cliccato), è possibile utilizzare il prefisso active: con qualsiasi classe utility.

Per stilizzare un pulsante quando è disabilitato (ad esempio, quando non può essere interagito), è possibile utilizzare il prefisso disabled: con qualsiasi classe utility.

index.html

index.html

copy

Spiegazione

  1. active:bg-green-800: Cambia il colore di sfondo in una tonalità di verde più scura quando il pulsante è attivo (premuto);
  2. opacity-50: Riduce l'opacità del pulsante per farlo apparire disabilitato;
  3. cursor-not-allowed: Modifica il cursore per indicare che il pulsante non è cliccabile;
  4. Attributo disabled: Lo rende non interattivo.

Esempio di Tutti gli Stati

Combinazione di tutti gli stati in un unico esempio

index.html

index.html

copy

Spiegazione

  1. bg-blue-500: Imposta il colore di sfondo predefinito;
  2. hover:bg-blue-700: Cambia il colore di sfondo al passaggio del mouse;
  3. focus:outline-none: Rimuove il contorno di focus predefinito;
  4. focus:ring-2: Aggiunge un bordo di focus con larghezza di 2 pixel;
  5. focus:ring-blue-600: Imposta il colore dell'anello di focus;
  6. focus:ring-opacity-50: Imposta l'opacità dell'anello di focus;
  7. active:bg-blue-800: Cambia il colore di sfondo quando il pulsante è attivo;
  8. text-white: Imposta il colore del testo su bianco;
  9. font-bold: Rende il testo in grassetto;
  10. py-2: Aggiunge padding verticale;
  11. px-4: Aggiunge padding orizzontale;
  12. rounded: Aggiunge angoli leggermente arrotondati.

Nota

Se hai bisogno di approfondire il componente Button di Tailwind, ecco un link alla documentazione ufficiale.

1. Come si cambia il colore di sfondo di un pulsante quando si passa il mouse sopra?

2. Quale classe utility rimuove il contorno di focus predefinito di un pulsante?

3. Quale classe utility modifica il colore di sfondo di un pulsante quando è attivo (premuto)?

question mark

Come si cambia il colore di sfondo di un pulsante quando si passa il mouse sopra?

Select the correct answer

question mark

Quale classe utility rimuove il contorno di focus predefinito di un pulsante?

Select the correct answer

question mark

Quale classe utility modifica il colore di sfondo di un pulsante quando è attivo (premuto)?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 1
some-alt