Come fare per - Caricamento di pulsanti
Scopri come creare pulsanti di caricamento con CSS.
Come modellare i pulsanti di caricamento
Passaggio 1) Aggiungi HTML:
Aggiungi una libreria di icone, come Font Awesome, e aggiungi icone ai pulsanti HTML:
Esempio
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Add font awesome icons to buttons (note that the fa-spin class
rotates the icon) -->
<button class="buttonload">
<i class="fa fa-spinner fa-spin"></i>Loading
</button>
<button class="buttonload">
<i class="fa fa-circle-o-notch
fa-spin"></i>Loading
</button>
<button class="buttonload">
<i
class="fa fa-refresh fa-spin"></i>Loading
</button>
Passaggio 2) Aggiungi CSS:
Esempio
/* Style buttons */
.buttonload {
background-color: #04AA6D; /* Green background */
border: none; /* Remove borders */
color: white; /*
White text */
padding: 12px 16px; /* Some padding */
font-size: 16px /* Set a font size */
}
Suggerimento: vai al nostro Tutorial sulle icone per saperne di più sulle icone.
Suggerimento: vai al nostro Come fare per - Caricatore CSS per sapere come creare un caricatore con CSS (senza una libreria di icone).
Vai al nostro tutorial sui pulsanti CSS per saperne di più su come applicare uno stile ai pulsanti.