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

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

Βήμα 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 στα κουμπιά -->
<p>Κουμπιά εικονιδίων:</p>
<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>
<p>Κουμπιά εικονιδίων με κείμενο:</p>
<button class="btn"><i class="fa fa-home"></i> Σπίτι</button>
<button class="btn"><i class="fa fa-bars"></i> Μενού</button>
<button class="btn"><i class="fa fa-trash"></i> Απορρίψιμο</button>
<button class="btn"><i class="fa fa-close"></i> Κλείσιμο</button>
<button class="btn"><i class="fa fa-folder"></i> Φάκελος</button>

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

/* Ρύθμιση στυλ του κουμπιού */
.btn {
  background-color: DodgerBlue; /* Μπλε παρασκήνιο */
  border: none; /* Κατάργηση περιγράμματος */
  color: white; /* Λευκό κείμενο */
  padding: 12px 16px; /* Μερικά εσωτερικά περιθώρια */
  font-size: 16px; /* Ρύθμιση μεγέθους γραμματοσειράς */
  cursor: pointer; /* Ο δείκτης του ποντίκιου όταν είναι ακίνητο */
}
/* Μπορεί να μεταβάλει το χρώμα του παρασκήνιου όταν το ποντίκι είναι ακίνητο */
.btn:hover {
  background-color: RoyalBlue;
}

Try it yourself

Related pages

Tutorial:Icon tutorial

Tutorial:CSS button