Hoe te maken: pictogramknoppen

Hoe een pictogramknop te maken

Stap 1 - Voeg HTML toe:

Voeg een pictogrambibliotheek toe, zoals Font Awesome, en plak de pictogrammen aan de HTML-knoppen:

<!-- Voeg een pictogrambibliotheek toe -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Voeg Font Awesome-icoon toe aan knoppen -->
<p>Icon-knoppen:</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>Icon-knoppen met tekst:</p>
<button class="btn"><i class="fa fa-home"></i> Thuis</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Prullenbak</button>
<button class="btn"><i class="fa fa-close"></i> Sluiten</button>
<button class="btn"><i class="fa fa-folder"></i> Map</button>

Tweede stap - Voeg CSS toe:

/* Instellen van stijl voor knoppen */
.btn {
  background-color: DodgerBlue; /* Blauwe achtergrond */
  border: none; /* Verwijderen van rand */
  color: white; /* Witte tekst */
  padding: 12px 16px; /* Enkele innende afstand */
  font-size: 16px; /* Instellen van lettergrootte */
  cursor: pointer; /* Muis wijzer bij hover */
}
/* Muis hover bij achtergrond donkerder */
.btn:hover {
  background-color: RoyalBlue;
}

Try it yourself

Related pages

Tutorial:Icon tutorial

Tutorial:CSS button