Wednesday , December 2 2020
Home » Bootstrap » Membuat Tombol Menggunakan Bootstrap

Membuat Tombol Menggunakan Bootstrap

Membuat Tombol Menggunakan Bootstrap

lebakcyber.net – Membuat tombol menggunakan Bootstrap. Membuat tombol dengan tampilan yang menarik pastinya bisa membuat tampilan sebuah website yang kita buat menjadi lebih menarik, dan pada kesempatan kali ini kita akan mencoba untuk membuat tombol dengan menggunakan Bootstrap.

Pada Bootstrap ada beberapa class yang dapat digunakan untuk membuat sebuah tombol yang menarik untuk dilihat. Dan berikut ini adalah beberapa class yang ada pada Bootstrap yang dapat digunakan untuk membuat sebuah tombol :

  • .btn = Sebuah class pada Bootstrap yang dapat digunakan untuk membuat tombol.
  • .btn-xs = Sebah class pada Bootstrap yang dapat digunakan untuk membuat tombol yang memiliki ukuran ekstra kecil atau ekstra small.
  • .btn-sm = Sebuah class pada Bootstrap yang dapat digunakan untuk membuat tombol yang memiliki ukuran kecil atau small.
  • .btn-md = Sebuah class pada Bootstrap yang dapat digunakan untuk membuat sebuah tombol yang memiliki ukuran sedang atau medium.
  • .btn-lg = Sebuah class pada Bootstrap yang dapat digunakan untuk membuat sebuah tombol yang memiliki ukuran besar.
  • .btn-success = Sebuah class pada Bootstrap yang dapat digunakan untuk membuat sebuah tombol dengan warna hijau.
  • .btn-danger = Sebuah class pada Bootstrap yang dapat digunakan untuk membuat sebuah tombol dengan warna merah.
  • .btn-warning = Sebuah class pada Bootstrap yang dapat digunakan untuk membuat sebuah tombol dengan warna kuning.
  • .btn-primary = Sebuah class pada Bootstrap yang dapat digunakan untuk membuat sebuah tombol dengan warna biru.

Membuat Button Memakai Bootstrap

Sekarang kita coba untuk mempraktekan bagaimana cara membuat tombol pada halaman html yang kita buat dengan menggunakan Bootstrap. Silahkan buat file index.html lalu masukan perintah dibawah ini :

Advertisements

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Membuat tombol menggunakan Bootstrap</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <h1>Tombol menggunakan Bootstrap <br> lebakcyber.net</h1>
    <a href="#" class="btn btn-default btn-lg">Tombol Besar</a>
    <a href="#" class="btn btn-default btn-md">Tombol Sedang</a>
    <a href="#" class="btn btn-default btn-sm">Tombol Kecil</a>
    <a href="#" class="btn btn-default btn-xs">Tombol Sangat Kecil</a>
    <br/><br/>
    <a href="#" class="btn btn-success btn-lg">Tombol Besar</a>
    <a href="#" class="btn btn-success btn-md">Tombol Sedang</a>
    <a href="#" class="btn btn-success btn-sm">Tombol Kecil</a>
    <a href="#" class="btn btn-success btn-xs">Tombol Sangat Kecil</a>
    <br/><br/>	
    <a href="#" class="btn btn-info btn-lg">Tombol Besar</a>
    <a href="#" class="btn btn-info btn-md">Tombol Sedang</a>
    <a href="#" class="btn btn-info btn-sm">Tombol Kecil</a>
    <a href="#" class="btn btn-info btn-xs">Tombol Sangat Kecil</a>
    <br/><br/>
    <a href="#" class="btn btn-primary btn-lg">Tombol Besar</a>
    <a href="#" class="btn btn-primary btn-md">Tombol Sedang</a>
    <a href="#" class="btn btn-primary btn-sm">Tombol Kecil</a>
    <a href="#" class="btn btn-primary btn-xs">Tombol Sangat Kecil</a>
    <br/><br/>
    <a href="#" class="btn btn-danger btn-lg">Tombol Besar</a>
    <a href="#" class="btn btn-danger btn-md">Tombol Sedang</a>
    <a href="#" class="btn btn-danger btn-sm">Tombol Kecil</a>
    <a href="#" class="btn btn-danger btn-xs">Tombol Sangat Kecil</a>
    <br/><br/>
    <a href="#" class="btn btn-warning btn-lg">Tombol Besar</a>
    <a href="#" class="btn btn-warning btn-md">Tombol Sedang</a>
    <a href="#" class="btn btn-warning btn-sm">Tombol Kecil</a>
    <a href="#" class="btn btn-warning btn-xs">Tombol Sangat Kecil</a>
</body>
</html>

Nanti hasil dari perintah membuat button dengan memakai Bootstrap diatas seperti ditampilkan pada gambar dibawah ini :

Advertisements

Menampilkan Gambar Menggunakan Bootstrap

Oke jadi seperti itulah bagaimana cara membuat sebuah button dengan memakai Bootstrap, semoga tutorial sederhana ini dapat bermanfaat bagi kalian yang sedang mempelajari Bootstrap, sampai bertemu di tutorial belajar Bootstrap selanjutnya ya.

About Firdan Ardiansyah

Admin di lebakcyber.net Untuk berhubungan dengan saya, silahkan kirim email ke : firdan@lebakcyber.net

Check Also

membuat navigation bar menggunakan bootstrap

Navigation Bar Menggunakan Bootstrap

Navigation Bar Menggunakan Bootstrap lebakcyber.net – Membuat Navigation bar menggunakan bootstrap. Pada kesempatan kali ini …

Leave a Reply

Your email address will not be published. Required fields are marked *