Tutorial Cara Membuat Button Link di Html

Tutorial Cara Membuat Button Link di Html 1

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.

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *