Cara Membuat Download Button

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 29, 2021

Dibawah ini kita akan mempelajari cara mengatur gaya download button dengan CSS. Download Button biasanya digunakan jika pengguna ingin mengunduh sesuatu dari website. Biasanya download button ini akan menambahkan icon di buttonnya.

Download Button

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Tambahkan icon dari library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
}

/* Background yang lebih gelap saat mengarahkan mouse */
.btn:hover {
  background-color: RoyalBlue;
}
</style>
</head>
<body>

<h2>Contoh Style Download Buttons</h2>

<p>Auto width:</p>
<button class="btn"><i class="fa fa-download"></i> Download</button>

<p>Full width:</p>
<button class="btn" style="width:100%"><i class="fa fa-download"></i> Download</button>

</body>
</html>

Cara Membuat Download Button

Langkah 1) Tambahkan HTML:
Tambahkan pustaka ikon, seperti font awesome dan tambahkan ikon ke tombol HTML:
Contoh

<!-- Tambahakan icon dari library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Auto width -->
<button class="btn"><i class="fa fa-download"></i> Download</button>

<!-- Full width -->
<button class="btn" style="width:100%"><i class="fa fa-download"></i> Download</button>

Langkah 2) Tambahkan CSS:
Contoh

/* Style buttons */
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
}

/* Background yang lebih gelap saat mengarahkan mouse */
.btn:hover {
  background-color: RoyalBlue;
}