Πώς να δημιουργήσετε: Φόρτωσης κουμπί

Πώς να ρυθμίσετε το στυλ του κουμπιού φόρτωσης

Βήμα 1 - Προσθήκη HTML:

Προσθέστε βιβλιοθήκη εικονιδίων, όπως το Font Awesome, και προσθέστε τα εικονίδια στο κουμπί HTML:

<!-- Προσθήκη βιβλιοθήκης εικονιδίων -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Προσθήκη εικονιδίου Font Awesome στο κουμπί (σημειώστε την κλάση fa-spin που θα κάνει το εικονίδιο να γυρίζει) -->
<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i> Φόρτωση
</button>
<button class="buttonload">
  <i class="fa fa-circle-o-notch fa-spin"></i> Φόρτωση
</button>
<button class="buttonload">
  <i class="fa fa-refresh fa-spin"></i> Φόρτωση
</button>

Βήμα 2 - Προσθήκη CSS:

/* Ρύθμιση στυλ κουμπιού */
.buttonload {
  background-color: #04AA6D; /* Γρανάζωμη υποβάθμιση */
  border: none; /* Είσοδος περιγράμματος */
  color: white; /* Λευκό κείμενο */
  padding: 12px 16px; /* Μερικές εσωτερικές χορδές */
  font-size: 16px /* Ρύθμιση μεγέθους γραμματοσειράς */
}

Δοκιμάστε προσωπικά

Σελίδες σχετικές

Εκμάθηση:}}Εκμάθηση εικονιδίων

Εκμάθηση:}}Κουμπιά CSS

Εκμάθηση:}}Πώς να δημιουργήσω; φορτωτής CSS