Nasıl oluşturulur: İkon düğmeleri

İkon düğmesi nasıl oluşturulur

Adım 1 - HTML ekle:

Ekran göstergesi kütüphanesi ekle, örneğin Font Awesome ve HTML düğmelerine göstergeler ekle:

<!-- Ekran göstergesi kütüphanesi ekle -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Düğmelere Font Awesome simgelerini ekle -->
<p>Simgeli düğmeler:</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>Metinli simgeli düğmeler:</p>
<button class="btn"><i class="fa fa-home"></i> Ana Sayfa</button>
<button class="btn"><i class="fa fa-bars"></i> Menü</button>
<button class="btn"><i class="fa fa-trash"></i> Çöp</button>
<button class="btn"><i class="fa fa-close"></i> Kapat</button>
<button class="btn"><i class="fa fa-folder"></i> Klasör</button>

İkinci Adım - CSS Ekle:

/* Düğme stillerini ayarla */
.btn {
  background-color: DodgerBlue; /* Mavi arka plan */
  border: none; /* Kenar çizgisini kaldır */
  color: white; /* Beyaz metin */
  padding: 12px 16px; /* Bazı iç dolgular */
  font-size: 16px; /* Yazı boyutunu ayarla */
  cursor: pointer; /* Farekete mouse gelince fare işareti */
}
/* Farekete mouse gelince arka plan koyu hale gelir */
.btn:hover {
  background-color: RoyalBlue;
}

Kişisel olarak deneyin

İlgili sayfalar

Eğitim:İkon eğitim

Eğitim:CSS butonu