Cara Membuat Button Berwarna dengan HTML dan CSS

Cara Membuat Button Berwarna dengan HTML dan CSS – Selamat datang di tutorial kami yang akan mengajarkan Anda cara membuat tombol berwarna yang menarik menggunakan HTML dan CSS! Apakah Anda ingin meningkatkan tampilan situs web Anda dengan tombol yang mencolok? Anda berada di tempat yang tepat! Dalam dunia web desain, detil kecil seperti tombol berwarna dapat membuat perbedaan besar dalam menarik perhatian pengunjung. Dalam artikel ini, kami akan membahas langkah-langkah sederhana yang cocok untuk pemula, sehingga Anda dapat dengan mudah menyesuaikan tampilan situs web Anda. Mari kita mulai petualangan desain web Anda dengan menciptakan tombol yang menonjol dan membuat pengunjung Anda tertarik untuk berinteraksi lebih lanjut!

Alat yang Dibutuhkan

Berikut ini beberapa alat yang dibutuhkan untuk membuat button berwarna dengan html dan css:

Perangkat laptop,
Notepad++ (Text editor code),
Chrome (Web browser),
Niat yang kuat.

Cara Membuat Button Berwarna dengan HTML dan CSS:

Langkah 1: Buat Folder Project “Button Berwarna”

Pertama, mari kita mulai dengan membuat folder untuk proyek kita. Anda dapat memberi nama folder ini sesuai keinginan Anda, misalnya “button-berwarna”.

Langkah 2: Buat File HTML

Selanjutnya, buatlah file HTML di dalam folder proyek Anda. Beri nama file ini “toko_online.html“. Anda bisa menggunakan teks editor favorit Anda untuk dapat membuat file ini. Dalam hal ini, saya membuat notepad++ untuk praktiknya.

Berikut ini file html yang dibutuhkan untuk membuat button berwarna dengan html dan css:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Designs</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="button-container">
    <a href="button1.html" class="button button1">Button 1</a>
    <a href="button2.html" class="button button2">Button 2</a>
    <a href="button3.html" class="button button3">Button 3</a>
    <a href="button4.html" class="button button4">Button 4</a>
  </div>
</body>
</html>

Langkah 3: Buat File CSS

Sekarang, mari kita buat file CSS untuk mendesain tombol kita. Buatlah file dengan nama “style.css” di dalam folder proyek yang sama dengan file HTML.

Berikut ini file css yang dibutuhkan untuk membuat button berwarna dengan html dan css:

/* Styles for Button 1 */
.button1 {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  }
  
  /* Styles for Button 2 */
  .button2 {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px;
    border-radius: 50%;
    border: 2px solid #c0392b;
  }
  
  /* Styles for Button 3 */
  .button3 {
    background-color: #27ae60;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px;
    border-radius: 0;
    border-bottom: 4px solid #1e8449;
  }
  
  /* Styles for Button 4 */
  .button4 {
    background-color: #f39c12;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px;
    border-radius: 3px;
    position: relative;
  }
  
  .button4::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 2px solid #c0392b;
    border-radius: 8px;
    z-index: -1;
  }

  .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Membuat container menutupi seluruh tinggi viewport */
  }

Langkah 4: Mengubah Warna Tombol

Anda dapat mengubah warna tombol dengan mengganti nilai pada properti background-color di file CSS. Misalnya, Anda dapat mengganti #4CAF50 dengan kode warna lain yang Anda sukai.

Langkah 5: Simpan dan Lihat Tampilan

Setelah mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan Anda. Kemudian, buka file “toko_online.html” di peramban web Anda untuk melihat tombol berwarna yang baru saja Anda buat.

Preview hasil

Berikut ini adalah preview hasil button berwarna dengan menggunakan html dan css jika Anda berhasil membuatnya:

Penutup

Dengan pengetahuan yang baru Anda peroleh, Anda sekarang memiliki kemampuan untuk menghadirkan elemen desain yang menarik dan memikat bagi pengunjung situs web Anda. Jangan ragu untuk bereksperimen dengan warna, ukuran, dan gaya tombol yang berbeda-beda untuk mencapai tampilan yang sesuai dengan visi Anda. Ingatlah bahwa desain yang baik adalah tentang menghadirkan pengalaman yang menyenangkan bagi pengguna, dan dengan menguasai teknik sederhana seperti ini, Anda telah melangkah lebih dekat menuju tujuan tersebut. Terima kasih telah mengikuti tutorial ini, dan semoga sukses dengan proyek desain web Anda selanjutnya!