Jak utworzyć: przycisk ładowania

Jak ustawić styl przycisku ładowania

krok 1 - dodaj HTML:

Dodaj bibliotekę ikon, na przykład Font Awesome, i dodaj ikonę do przycisku HTML:

<!-- Dodaj bibliotekę ikon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Dodaj ikonę Font Awesome do przycisku (uwaga: klasa fa-spin obraca ikonę) -->
<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i>Ładowanie
</button>
<button class="buttonload">
  <i class="fa fa-circle-o-notch fa-spin"></i>Ładowanie
</button>
<button class="buttonload">
  <i class="fa fa-refresh fa-spin"></i>Ładowanie
</button>

krok 2 - dodaj CSS:

/* ustawienie stylu przycisku */
.buttonload {
  background-color: #04AA6D; /* zielisty tło */
  border: none; /* usunięcie ramki */
  color: white; /* biały tekst */
  padding: 12px 16px; /* pewne wewnętrzne marginesy */
  font-size: 16px /* ustawienie rozmiaru czcionki */
}

spróbuj sam

strony związane

Tutorial:Ikona tutoriala

Tutorial:Przycisk CSS

Tutorial:Jak stworzyć loader CSS