Bagaimana membuat: tombol ikon

Bagaimana membuat tombol ikon

Langkah pertama - Menambahkan HTML:

Menambahkan pustaka ikon, seperti Font Awesome, dan tetapkan ikon ke tombol HTML:

<!-- Menambahkan pustaka ikon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Tambahkan ikon Font Awesome ke tombol -->
<p>Tombol ikon:</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>Tombol ikon dengan teks:</p>
<button class="btn"><i class="fa fa-home"></i> Beranda</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Tempat Sampah</button>
<button class="btn"><i class="fa fa-close"></i> Tutup</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>

Langkah kedua - Tambahkan CSS:

/* Menetapkan gaya tombol */
.btn {
  background-color: DodgerBlue; /* Latar belakang biru */
  border: none; /* Hapus garis border */
  color: white; /* Teks putih */
  padding: 12px 16px; /* Beberapa jarak dalam */
  font-size: 16px; /* Menetapkan ukuran font */
  cursor: pointer; /* Tetikus kursor saat kena tumbukan tetikus */
}
/* Kena tumbukan tetikus saat warna latar belakang menjadi gelap */
.btn:hover {
  background-color: RoyalBlue;
}

Coba sendiri

Halaman yang berhubungan

Panduan:Panduan ikon

Panduan:Tombol CSS