Tutorial Pemrograman

Cara Custom Button Style dengan Bootstrap

Bootstrap adalah suatu pustaka CSS Framework yang didesain untuk mempercantik tampilan dalam produktifitas website. Bootstrap ini memiliki kumpulan kode script yang telah siap dipakai untuk merancang tampilan website sehingga si web programmer tidak perlu membuat kode perintah CSS dari nol. Bootstrap merupakan salah satu CSS Framework yang populer bagi web programmer frontend pada saat ini.

Dengan adanya Bootstrap ini, maka si web programmer diharapkan mudah dalam membuat atau merancang tampilan website sesuai kebutuhan.

Sekarang, penulis akan berikan tutorial untuk custom tampilan button style dengan CSS Framework yakni Bootstrap sesuai dengan fungsi masing-masing button sesuai kebutuhan dalam berbagai website.

Sebelum mulai, pastikan kamu memiliki library CSS Framework Bootstrap di dalam project website kamu. Apabila belum memiliki library tersebut, maka kamu bisa kunjung link web Bootstrap. Kemudian silahkan tekan CTRL + S untuk mengunduh library tadi. Tentukan tempat simpan project web kamu, klik Save.

A. MEMBUAT KERANGKA TAMPILAN BUTTON STYLE DENGAN HTML

1. Silahkan aktifkan teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “btn-bootstrap1.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome atau Mozilla).

Berikut hasilnya.

Pastikan kamu simpan kode script ini di dalam folder project yang memiliki library CSS Framework Bootstrap.

Warna dari Kegunaan Masing-Masing Button Style.

  • Default, suatu button style yang berwarna abu-abu.
  • Primary, suatu button style yang berwarna biru.
  • Info, suatu button style yang berwarna biru muda.
  • Success, suatu button style yang berwarna hijau.
  • Warning, suatu button style yang berwarna kuning.
  • Danger, suatu button style yang berwarna merah.
  • Link, suatu button style yang transparan.

B. HUBUNGKAN LINK CSS BOOTSTRAP KE HALAMAN HTML

1. Kembali ke fokus halaman btn-bootstrap1.html tadi di text editor.

2. Tambahkan kode script di bawah ini.

Kode script ini terletak di bawah tag <title>. Setelah itu tekan CTRL + S lagi.

3. Silahkan tekan F5 pada web browser kamu. Lihat hasilnya.

Pastikan kamu simpan kode script ini di dalam folder project yang memiliki library CSS Framework Bootstrap.

Jika semua tampilan halaman custom button style tadi sesuai dengan gambar yang di atas, berarti tandanya berhasil. Jadi, kamu bisa membuat button style sesuai dengan fungsi kegunaan dalam website secara mudah dan praktis.

Demikian tutorial cara custom button style pada website dengan Bootstrap. Selamat mencoba.









Click to comment

Leave a Reply

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

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top