Cara membuat button tombol facebook manual

Tutorial Bootstrap Part 9: Cara Membuat Tombol (Button)

Table of Contents Show

Cara Membuat Tombol di Bootstrap
Mengatur Warna Tombol
Apa itu CTA di Facebook?
Bagaimana cara agar fb di ikuti?

08 Oct 21 | | Tutorial Bootstrap | |

Salah satu komponen web yang sangat sering kita buat adalah tombol atau button. Bootstrap menyediakan berbagai class untuk membuat tombol, inilah yang akan kita bahas dalam tutorial kali ini.

Cara Membuat Tombol di Bootstrap

Dalam HTML, button bisa dibuat dengan berbagai cara, misalnya menggunakan tag <button> atau tag <input type=button>. Selain itu Bootstrap juga membolehkan kita membuat button dari tag lain seperti <span> atau <a>. Caranya, tambahkan class .btn ke dalam element tersebut.

Berikut contoh pembuatan button di dalam Bootstrap:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Belajar Bootstrap</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <style>
    .container {
	  margin-top: 10px
	}
  </style>
</head>
<body>

    <div class="container mt-3">

      <button class="btn">Tombol</button>
      <input type="button" class="btn" value="Tombol">
      <span class="btn">Tombol</span>
      <a href="#" class="btn">Tombol</a>
    
    </div>
    
  <script src="js/bootstrap.bundle.js"></script>
</body>
</html>

Ke dalam ke-4 element di atas, saya tambahkan class .btn untuk membuat tombol. Tampilannya saat ini memang lebih mirip teks biasa, namun begitu cursor mouse diarahkan ke atas teks, cursor akan berubah menjadi “tangan” yang menandakan itu adalah sebuah tombol. Jika teks di klik, akan tampil efek bingkai. Kita akan warnai tombol-tombol ini sesaat lagi.

Poin penting di sini adalah, class .btn dipakai untuk membuat struktur dasar button. Bootstrap menyediakan berbagai class tambahan lain agar tampilannya menjadi lebih menarik.

Mengatur Warna Tombol

Modifikasi paling sering yang dilakukan untuk button adalah mengubah warnanya. Dalam Bootstrap, jika berhubungan dengan warna maka yang dimaksud adalah contextual classes, yakni sistem penamaan warna sesuai dengan tujuan warna tersebut (primary, secondary, warning, dst)

Bootstrap menyediakan 8 class untuk mengubah warna tombol, yakni:

.btn-primary
.btn-secondary
.btn-success
.btn-danger
.btn-warning
.btn-info
.btn-light
.btn-dark

Berikut contoh penggunaannya:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Belajar Bootstrap</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <style>
    .container {
	  margin-top: 10px
	}
  </style>
</head>
<body>

    <div class="container mt-3 text-center">

      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-light">Light</button>
      <button type="button" class="btn btn-dark">Dark</button>
          
    </div>
    
  <script src="js/bootstrap.bundle.js"></script>
</body>
</html>

Sekarang tampilan tombol menjadi lebih menarik dengan berbagai variasi warna. Selain itu terdapat efek hover sewaktu cursor mouse berada di atas tombol, dimana warna tombol akan sedikit meredup.

Dalam tutorial Bootstrap kali ini kita telah membahas cara membuat tombol serta memberikan efek warna ke dalam tombol / button.

Saat ini di Duniailkom tersedia eBook / buku Bootstrap 5 Uncover. Dengan 529 halaman A4, materi di buku jauh lebih banyak daripada tutorial Bootstrap di web Duniailkom. Penjelasan lebih lanjut bisa ke: Bootstrap 5 Uncover – Panduan Belajar Framework Bootstrap.

Apa itu CTA di Facebook?

Tombol ajakan bertindak (atau tombol CTA) mengarahkan pengunjung Halaman Anda untuk melakukan sesuatu yang spesifik, seperti mengunjungi situs web Anda atau menelepon toko Anda. Untuk menambahkan tombol CTA, mulai di Halaman Anda. Di bawah foto sampul Anda, klik Tambahkan Tombol.