Nasıl oluşturulur: Yüklenme düğmesi

Yüklenme düğmesinin stilini nasıl ayarlarım

İlk adım - HTML ekleyin：

Simge kütüphanesi ekleyin, örneğin Font Awesome ve HTML düğmesine simgeleri ekleyin：

<!-- Simge kütüphanesini ekleyin -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Düğmeye Font Awesome simgesi ekleyin（lütfen fa-spin sınıfı simgeyi döndürür）-->
<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i>Yükleniyor
</button>
<button class="buttonload">
  <i class="fa fa-circle-o-notch fa-spin"></i>Yükleniyor
</button>
<button class="buttonload">
  <i class="fa fa-refresh fa-spin"></i>Yükleniyor
</button>

İkinci adım - CSS ekleyin：

/* Düğme stillerini ayarlar */
.buttonload {
  background-color: #04AA6D; /* Yeşil arka plan */
  border: none; /* Kenar çizgisini kaldırır */
  color: white; /* Beyaz metin */
  padding: 12px 16px; /* Bazı iç kenar boşlukları */
  font-size: 16px /* Yazı boyutunu ayarlar */
}

Kişisel olarak deneyin

İlgili sayfa

Tutorial:Icon tutorial

Tutorial:CSS button

Tutorial:How to create CSS loader