Cara Membuat Button Link Atau Tombol Link di Postingan Blog

Pengertian Button Link

Button link (tombol tautan) adalah elemen desain antarmuka pengguna (UI) berbentuk tombol yang jika diklik akan mengalihkan pengguna ke halaman web lain, dokumen, atau bagian tertentu dalam situs tersebut. Secara teknis, ini adalah tautan teks biasa (hyperlink) yang dikemas dalam bentuk grafis tombol agar lebih mencolok, interaktif, dan menarik perhatian pembaca.

Button link juga biasa disebut dengan download link atau tombol link. Beberapa variasi juga akan disebutkan cara membuatnya pada postingan ini.

Fungsi utama dari button link meliputi:

• Call to Action (CTA): Mengarahkan pengguna untuk mengambil tindakan penting, seperti tombol Download, Daftar Sekarang, atau Beli.
• Navigasi: Memudahkan pengguna berpindah halaman dengan cepat di dalam sebuah aplikasi atau situs web.
• Estetika: Membuat tampilan tata letak halaman terlihat lebih profesional dan modern dibandingkan hanya menggunakan teks bergaris bawah.

Cara Membuat Button Link

Membuat button link cukup mudah. Pertama buka postingan baru dan menerapkan kode pada mode tampilan HTML. Contohnya kode berikut.

<a class="button" href="#">Default Button</a>

Hasil

Keterangan

Pada tulisan Default Button adalah nama teks dalam kotak tombol. Anda bisa ganti dengan nama Download Link atau Tombol Link

Tanda # diisi dengan link atau tautan Anda. Jangan lupa dihapus terlebih dahulu tanda pagarnya.

Variasi Button Link

Contoh

Cara membuatnya sama dengan keterangan di atas, namun kodenya sedikit berbeda.

<a class="button" href="#">Default Button</a>
<a class="button rounded" href="#">Rounded Button</a>
<a class="button outlined" href="#">Outlined Button</a>
<a class="button icon-download" href="#">Download</a>
<a class="button rounded outlined icon-download" href="#">Mix Button</a>

Pilih salah satu di antara lima kode tersebut. Maka tampilan akan sesuai dengan contoh di atas.

Button Link Dengan Tambahan Beberapa Elmen

Kode

<div class="box-download">
  <div>
    xml
  </div>
  <div>
    <span>template.xml</span>
    <span>150KB</span>
  </div>
  <div>
    <a href="#" class="button icon-download">Download</a>
  </div>
</div>

Hasil

Keterangan

• Perhatikan kode html dan tampilan button link
• xml pada baris ketiga dalam kode html adalah tulisan pada icon lingkaran dan bisa diubah dengan zip atau img.
• template.xml pada baris ke-6 pada kode merupakan tulisan pada samping icon bulat. Anda bisa menggantinya sesuai kebutuhan
• 150KB pada baris ke-7 adalah jumlah Kb, bisa diganti sesuai kebutuhan.
• Tanda pagar (#) diisi dengan link yang akan dituju.

Download Link + Icon

Anda perlu menambahkan kode svg dan ukuran yang disarankan 24px. Cara membuat button link dengan icon adalah menggunakan kode berikut

<div class="box-download">
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M4 20q-.825 0-1.412-.587Q2 18.825 2 18V6q0-.825.588-1.412Q3.175 4 4 4h6l2 2h8q.825 0 1.413.588Q22 7.175 22 8v10q0 .825-.587 1.413Q20.825 20 20 20Zm12-2h4V8h-4v2h2v2h-2v2h2v2h-2ZM4 18h10v-2h2v-2h-2v-2h2v-2h-2V8h-2.825l-2-2H4v12ZM4 8V6v12V8Z"/></svg>
  </div>
  <div>
    <span>template.zip</span>
    <span>150KB</span>
  </div>
  <div>
    <a href="#" class="button icon-download">Download</a>
  </div>
</div>

Hasil

Download Link + Image

Untuk membuat download link tersebut Anda hanya perlu menambahkan gambar menggunakan img

Contoh Kode

<div class="box-download">
  <div>
    <img src="https://play-lh.googleusercontent.com/cF_oWC9Io_I9smEBhjhUHkOO6vX5wMbZJgFpGny4MkMMtz25iIJEh2wASdbbEN7jseAx=s64-rw"/>
  </div>
  <div>
    <span>Google Chat</span>
    <span>Google LLC</span>
  </div>
  <div>
    <a href="#" class="button icon-download">Download</a>
  </div>
</div>

Hasil

Google Chat Google LLC

Download

Download Link + Image + Transparent

Digunakan untuk menghilangkan background abu-abu.

Contoh Kode

<div class="box-download">
  <div class="transparent">
    <img src="https://play-lh.googleusercontent.com/cF_oWC9Io_I9smEBhjhUHkOO6vX5wMbZJgFpGny4MkMMtz25iIJEh2wASdbbEN7jseAx=s64-rw"/>
  </div>
  <div>
    <span>Google Chat</span>
    <span>Google LLC</span>
  </div>
  <div>
    <a href="#" class="button icon-download">Download</a>
  </div>
</div>

Hasil

Google Chat Google LLC

Download