Come creare pulsanti in Bootstrap 5?

Per creare pulsanti in Bootstrap 5, puoi utilizzare l'elemento `

```

Questo crea un pulsante blu predefinito.

Pulsanti colore personalizzati:

Per creare pulsanti con colori diversi, puoi utilizzare le classi `btn-{color}`, dove `{color}` può essere sostituito con uno dei seguenti:

- primario

- secondario

- successo

- Pericolo

- avvertimento

- informazioni

- leggero

- buio

Ad esempio, per creare un pulsante rosso:

```html

```

Pulsanti di contorno:

Per creare pulsanti di contorno, utilizza le classi `btn-outline-{color}`. Ad esempio, per creare un pulsante rosso contornato:

```html

```

Pulsanti disabilitati:

Per disabilitare un pulsante, aggiungigli l'attributo "disabled".

```html

```

Dimensioni dei pulsanti:

Puoi anche modificare la dimensione dei pulsanti utilizzando le classi `btn-{size}`, dove `{size}` può essere uno dei seguenti:

- sm (piccolo)

- LG (grande)

Ad esempio, per creare un piccolo pulsante:

```html

```

Stile personalizzato:

Puoi personalizzare ulteriormente l'aspetto dei pulsanti aggiungendovi stili CSS personalizzati.

Ecco una tabella che riassume le classi dei pulsanti Bootstrap 5 e i loro effetti:

| Classe | Effetto |

|---|---|

| `btn` | Crea un pulsante di base. |

| `btn-primario` | Crea un pulsante blu. |

| `btn-secondario` | Crea un pulsante grigio. |

| `btn-successo` | Crea un pulsante verde. |

| `btn-pericolo` | Crea un pulsante rosso. |

| `btn-avviso` | Crea un pulsante giallo. |

| `btn-info` | Crea un pulsante azzurro. |

| `btn-luce` | Crea un pulsante bianco. |

| `btn-scuro` | Crea un pulsante nero. |

| `btn-contorno-{colore}` | Crea un pulsante di contorno nel colore specificato. |

| `btn-{dimensione}` | Modifica la dimensione del pulsante. |

Puoi combinare più classi per creare stili di pulsanti più complessi. Ad esempio, il codice seguente crea un piccolo pulsante rosso delineato:

```html

```

Come creare pulsanti in Bootstrap 5?

Informazioni correlate

Articoli consigliati