Tutorial Cara Membuat Button Link di Html

2 min read

Cara Membuat Button Link di Html

Pada tutorial kali ini kodekreasi akan membagikan tutorial tentang bagaimana cara membuat button link di html . Button merupakan salah satu elemen yang sering digunakan pada pemrograman web. Elemen ini biasanya digunakan untuk menyatakan action terhadap suatu aktifitas pada website misalnya submit form , mengarahkan user ke halaaman lain dll.

Pada html khususnya html 5 sendiri elemen button dapat dibuat dengan beberapa cara seperti menggunakan tag <a> , tag <button> atau dengan mennggunakan form yang didalamnya terdapat tag < input > dengan type submit. Ok tidak usah berlama-lama lagi langsung saja kita coba praktikkan cara membuat button di html tersebut .

Cara Membuat Button Link di Html

Pertama tama buat sebuah file html dengan nama index.html kemudian copykan kode html berikut ini di dalamnya.

<!DOCTYPE html>
<html>
<head>
    <title>Cara Membuat Button di HTML - https://kodekreasi.com</title>
</head>
<body>
  <div class="row">
    
     <!-- Contoh 1 menggunakan form dan button -->
     <form method="post" action="https://kodekreasi.com">
      <button type="submit" class="btn mr-2">Contoh 1</button>
     </form>
     <!-- end contoh 1 -->

     <!-- Contoh 2 menggunakan form dan input -->
     <form action="https://kodekreasi.com">
      <input type="submit" value="submit value" class="btn mr-2" />
     </form>
     <!-- end contoh 2 -->

     <!-- Contoh 3 menggunakan tag <a> -->
     <a href="#" class="btn mr-2">Contoh 3</a>
     <!-- end contoh 3 -->
    
    <!-- Contoh 4 menggunakan tag button -->
    	<button onclick="window.location.href='https://kodekreasi.com'" class="btn mr-2">Contoh 4</button>
    <!-- end contoh 4 -->
    
  </div>
</body>
</html>

Untuk mempercantik tampilan button yang telah kita buat diatas agar terlihat lebih keren sekarang kita tambahkan scribt css nya berikut ini kedalam scribt html yang telah kita buat . Untuk menambahkan scribt css tersebut dapat dilakukan dengan 2 cara yaitu bisa dengan menambahkan scribt css di dalam tag <style></style> terus kita letakkan pada tag <head> html. Atau kalian bisa juga menambahkan file css kedalam folder yang sama dengan file html kita tadi kemudian buat penghubung agar file css tersebut dapat terakses dari scribt html.

.row{
  display:flex;
  justify-content:center;
  margin-top:1rem;
}
.mr-2{
  margin-right: 0.5rem;
}

/* css button */
.btn{
    font-family: sans-serif;   //mengatur jenis font
    font-size: 1em;   //mengatur ukuran font
    background: #ffb74d;  //mengatur warna background
    color: white;  //mengatur warna font
    border: white 0.2rem solid; //mengatur border atau garis tepi button
    border-radius: 0.5rem; //mengatur radius garis tepi button
    padding: 0.8rem 1.8rem; //mengatur jarak padding button
    margin-top: 1rem; //mengatur jarak margin bagian atas button
    text-decoration:none;  //menghilangkan garis bawah pada link 
}
/* memberi efek hover pada button */
.btn:hover{
   opacity:0.9;
}

Sehingga keseluruhan programnya akan menjadi seperti berikut ini :

<!DOCTYPE html>
<html>
<head>
    <title>Cara Membuat Button di HTML - https://kodekreasi.com</title>
    <style>
        .row{
            display:flex;
            justify-content:center;
            margin-top:1rem;
         }
        .mr-2{
           margin-right: 0.5rem;
        }

        /* css button */
       .btn{
           font-family: sans-serif;   //mengatur jenis font
           font-size: 1em;   //mengatur ukuran font
           background: #ffb74d;  //mengatur warna background
           color: white;  //mengatur warna font
           border: white 0.2rem solid; //mengatur border atau garis tepi button
           border-radius: 0.5rem; //mengatur radius garis tepi button
           padding: 0.8rem 1.8rem; //mengatur jarak padding button
           margin-top: 1rem; //mengatur jarak margin bagian atas button
           text-decoration:none;  //menghilangkan garis bawah pada link 
       }
      /* memberi efek hover pada button */
      .btn:hover{
          opacity:0.9;
      }
    </style>
</head>
<body>
  <div class="row">
    
     <!-- Contoh 1 menggunakan form dan button -->
     <form method="post" action="https://kodekreasi.com">
      <button type="submit" class="btn mr-2">Contoh 1</button>
     </form>
     <!-- end contoh 1 -->

     <!-- Contoh 2 menggunakan form dan input -->
     <form action="https://kodekreasi.com">
      <input type="submit" value="submit value" class="btn mr-2" />
     </form>
     <!-- end contoh 2 -->

     <!-- Contoh 3 menggunakan tag <a> -->
     <a href="https://kodekreasi.com" class="btn mr-2">Contoh 3</a>
     <!-- end contoh 3 -->
    
    <!-- Contoh 4 menggunakan tag button -->
    	<button onclick="window.location.href='https://kodekreasi.com'" class="btn mr-2">Contoh 4</button>
    <!-- end contoh 4 -->
    
  </div>
</body>
</html>

Setelah itu coba jalankan scribt tersebut . Ingat jika kalian mau menjalankan scribt tersebut di localhost pastikan web service kalian telah berjalan . Jika kalian belum menginstall web service di komputer kalian , kalian dapat mengikuti tutorial berikut ini tentang cara menginstall xampp di windows . Hasil dari scribt program diatas akan menjadi seperti berikut ini jika dijalankan:

Tutorial Cara Membuat Button Link di Html

Kalian juga daapat mencoba mempraktikanya secara oline melalui codepen berikut :

See the Pen button html by firman196 (@firman196) on CodePen.

Sekian artikel dari saya kali ini mengenai cara membuat button link di html jangan lupa baca artikel saya yang lain.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *