Cara Membuat Button di Template Median UI 1.7

     Hai semuanya, kali ini saya akan memberikan Tutorial Cara Membuat Button di Template Median UI 1.7. Pada artikel sebelumnya, saya sudah membagikan Tutorial Cara Membuat Guide List di Median UI 1.7. Biasanya button atau tombol digunakan untuk menyisipkan link download ataupun link demo dan menyisipkan halaman lainnya. Sebelumnya, saya juga sudah membagikan Tutorial Cara Membuat Button di Html. Namun sekarang lebih mudah karena kita hanya menuliskan codingan nya tanpa harus menuliskan CSS nya. Karena CSS nya sudah otomatis ada di Template Median UI 1.7. Di Template Median UI 1.7 kita bisa membuat berbagai jennis button, dan kita juga menambahkan icon di dalam button tersebut. Berikut ini adalah jenis jenis nya.

1. Default Button

     Default Button merupakan tombol yang umum kita jumpai. Karena tombol ini hanya tombol biasa dan berwarna. Berikut ini adalah contoh codingan nya.

<a class='button' href='https://freezegans.blogspot.com'>Button</a>

Hasilnya seperti dibawah ini

Button

2. Outline Button

     Outline Button merupakan tombol yang hanya memiliki garis tepi dan tidak memiliki warna. Berikut ini adalah contoh codingan nya.

<a class='button ln' href='https://freezegans.blogspot.com'>Button</a>

Hasilnya seperti dibawah ini

Button

Artikel Menarik Lainnya :

• Cara Membuat Guide List di Median UI 1.7
• Cara Menggunakan Icon Bootstrap
• Download Template Median UI 1.7
• Cara Menggunakan Google Fonts Untuk Website
• Cara Membuat Sistem Login Menggunakan Javascript

3. Button Without Background

     Button Without Background merupakan button yang tidak memiliki background, jadi hanya tulisan saja. Berikut ini adalah contoh codingan nya.

<a class='button sc' href='https://freezegans.blogspot.com'>Button</a>

Hasilnya seperti dibawah ini

Button

4. Button With Icon

     Button With Icon merupakan button yang memiliki icon. Fungsinya menambahkan icon pada button adalah agar pembaca bisa mengetahui perbedaan dari button yang ada. Contoh nya button untuk download diberikan icon unduh. Berikut ini adalah codingan nya.

<a class='button' href='https://freezegans.blogspot.com'>
  <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  <span>Button</span>
</a>

Hasilnya seperti dibawah ini

Download

5. Two Button in One Row

     Two Button in One Row merupakan dua buah button yang berdampingan. Contoh codingan nya seperti dibawah ini

<div class='btnF'>
  <a class='button ln' href='https://freezegans.blogspot.com'>
    <span>Info</span>
  </a>
  <a class='button' href='https://freezegans.blogspot.com'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
    <span>Download</span>
  </a>
</div>

Hasilnya seperti dibawah ini

Info Download

Kamu bisa mengganti link sesuai dengan keinginan mu.

Itulah berbagai jenis button yang bisa kamu gunakan dalam Template Median UI 1.7. Jika kamu memiliki kritik dan saran, kamu bisa sampaikan melalui kolom komentar yang tersedia. Sekian dan terimakasih.