Cara Membuat Tombol Upload Menggunakan Bulma Framework

Tombol upload kita sering temukan pada form isian pad website yang mengharuskan kita meng-upload suatu file. Class File adalah class yang disediakan oleh bulma untuk membuat suatu tombol upload yang dimana kita bisa menggunakannya untuk mempermudah membuat design tombolnya. Maka dari itu pada artikel kali ini saya akan mencoba membahas tentang Cara Membuat Tombol Upload Menggunakan Bulma Framework.

Berikut adalah langkah-langkah Cara Membuat Tombol Upload Menggunakan Bulma Framework:

1. Pertama

anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.

2. Kedua

anda ketikan kode html di bawah ini:

<!DOCTYPE html>
<html>
<head>
  <title>File</title>
  <!--link ke css bulma-->
  <link rel="stylesheet" type="text/css" href="bulma-0.5.1/css/bulma.css">
  <link rel="stylesheet" type="text/css" href="bulma-0.5.1/css/bulma.css.map">
  <!--link ke font-awesome-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="file has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fa fa-upload"></i>
      </span>
      <span class="file-label">
        Silahkan Upload
      </span>
    </span>
    <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
    </span>
  </label>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</span>

Silahkan Upload

</span>

Screen Shot 2017-07-29 at 15.54.25.png

</span>

</label>

</div>

</body>

</html>

Coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:

Class file juga dapat kita rubah warna dan size atau bentuknya sesuai keinginan kita tentunya dengan bantuan class yang sudah di sediakan oleh bulma itu sendiri. Untuk penjelasan class apa saja yang bisa kita gunakan untuk mewarnai background pada class file saya akan membahasnya pada artikel di lain hari.

Dengan bulma kita dapat dengan mudah tombol upload tentunya dengan class yang sudah di sediakan oleh bulma. Bagaimana teman-teman cukup mudahkan membuat kotak besar menggunakan class file pada bulma.

Sekian pembahasan kali ini tentang Cara Membuat Tombol Upload Menggunakan Bulma Framework. Semoga bermanfaat.

Cara Membuat Tombol Upload Menggunakan Bulma Framework

Facebook DUMET School

Categories