Friday, March 17, 2017

Cara Membuat Button Style Bootstrap Hanya Dengan CSS Tanpa Javascript

Cara Membuat Button Style Bootstrap Hanya Dengan CSS Tanpa Javascript

Cara Membuat Button Style Bootstrap - Bootstrap memang terkenal dengan style yang bagus,unik dan elegan, banyak sekali blog-blog yang menggunakan bootstrap sebagai pondasi blog mereka. Namun disisi lain sebelum menggunakan bootstrap, kita diwajibkan untuk memasang terlebih dahulu script bootstrap. Perlu diketahui juga bahwa pemasangan javascript hanya akan memberatkan loading blog, memang dari segi tampilan terlihat keren, namun apa gunanya jika keren namun memilki loading blog yang lambat.

Button style bootstrap sendiri bisa digunakan untuk berbagai macam fungsi, seperti tombol download,notifikasi peringatan dan lain-lain. Seperti yang sudah cara-mei bahas kemarin tentang membuat alert style bootstrap. Disini kita hanya akan menggunakan kode css saja, mengingat kita hanya akan membuat sebagian kecil dari fungsi bootstrap, yaitu membuat button dengan style bootstrap, supaya terlihat lebih elegan.


Dengan pembuatan button menggunakan css ini kita tidak perlu khawatir akan loading blog, karena kode css yang akan kita gunakan hanya sedikit, berbeda dengan script bootstrap yang jumlah kode didalamnya sangat banyak, hal itu tentunya akan membuat loading blog menjadi lambat. Silahkan simak tutorial dibawah ini.


Cara Membuat Button Style Bootstrap Hanya Dengan CSS Tanpa Javascript


1. Pertama silahkan salin kode dibawah ini dan paste tepat dibawah kode <head>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 

2. Untuk memanggil kode button didalam artikel ataupun di widget, menggunakan html dibawah ini

  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-link">Link</button>      

Script CSS diatas jauh lebih baik dari pada menggunakan kode javascript yang hanya akan memberatkan loading blog
Kalian hanya tinggal mengganti kata-kata didalam button tersebut dengan "Download,Unduh,Upload,dsb" dan menambahkan link sesuai kebutuhan blog kalian. Jika kalian mengalami kesulitan dalam pemasangan kode-kode diatas, silahkan tinggalkan komentar.

Sekian tutorial tentang Membuat Button Style Bootstrap Hanya Dengan CSS Tanpa Javascript. Semoga menjadikan blog kalian menjadi tidak membosankan.


EmoticonEmoticon