Hur man skapar: laddningsknapp

Hur man skapar CSS-laddare Föregående sida
Läs mer/Läs mindre Nästa sida

Lär dig hur man använder CSS för att skapa laddningsknappar.

Hur man ställer in stilen för laddningsknappen

Steg 1 - Lägg till HTML:

Lägg till ikonbibliotek, till exempel Font Awesome, och fästa ikoner till HTML-knappen:

<!-- Lägg till ikonbibliotek -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Lägg till Font Awesome-ikon för knappen (observera att fa-spin-klassen roterar ikonen) -->
<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i>Laddar
</button>
<button class="buttonload">
  <i class="fa fa-circle-o-notch fa-spin"></i>Laddar
</button>
<button class="buttonload">
  <i class="fa fa-refresh fa-spin"></i>Laddar
</button>

Steg 2 - Lägg till CSS:

/* Ställ in knappens stil */
.buttonload {
  background-color: #04AA6D; /* Grön bakgrund */
  border: none; /* Ta bort ram */
  color: white; /* Vit text */
  padding: 12px 16px; /* Vissa innervåningar */
  font-size: 16px /* Ställ in teckenstorlek */
{}

Prova själv