Come creare: pulsante di caricamento

Come impostare lo stile del pulsante di caricamento

Primo passo - Aggiungi HTML:

Aggiungi la libreria delle icone, ad esempio Font Awesome, e aggiungi le icone al pulsante HTML:

<!-- Aggiungi la libreria delle icone -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Aggiungi l'icona Font Awesome al pulsante (notare che la classe fa-spin farà ruotare l'icona) -->
<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i>Caricamento
</button>
<button class="buttonload">
  <i class="fa fa-circle-o-notch fa-spin"></i>Caricamento
</button>
<button class="buttonload">
  <i class="fa fa-refresh fa-spin"></i>Caricamento
</button>

Secondo passo - Aggiungi CSS:

/* Imposta lo stile del pulsante */
.buttonload {
  background-color: #04AA6D; /* Sfondo verde */
  border: none; /* Rimuovi il bordo */
  color: white; /* Testo bianco */
  padding: 12px 16px; /* Alcuni margini interni */
  font-size: 16px /* Imposta la dimensione del carattere */
}

Prova personalmente

Pagina correlata

Tutorial:Guida agli iconi

Tutorial:Pulsante CSS

Tutorial:Come creare il loader CSS