Cara Membuat Button Link Di Html

Hay gaes kali ini admin akan membagikan tutorial tentang cara membuat button link di html. Button merupakan keliru satu elemen yang sering digunakan
Cara Membuat Button Link Di Html

Hay gaes kali ini admin akan membagikan tutorial tentang cara membuat button link di html. Button merupakan keliru satu elemen yang sering digunakan pada pemrograman web. Elemen ini biasanya digunakan untuk memperlihatkan action pada suatu aktifitas pada website seumpama submit form , mengarahkan user ke halaaman lain dll.

Pada html khususnya html 5 sendiri elemen button mampu dibuat dengan lebih dari satu cara seperti menggunakan tag <a> , tag <button> atau dengan mennggunakan form yang didalamnya terkandung tag < input > dengan model submit. Ok tidak usah berlama-lama kembali segera saja kita coba praktikkan cara sebabkan button di html selanjutnya .

Cara Membuat Button Link Di Html

Pertama tama membuat sebuah file html dengan nama index.html kemudian copykan kode html selanjutnya ini di dalamnya.

<!DOCTYPE html>
<html>
<head>
    <title>Cara Membuat Button di HTML - https://www.market-pedia.id</title>
</head>
<body>
  <div class="row">
     
     <!-- Contoh 1 menggunakan form dan button -->
     <form method="post" action="https://www.market-pedia.id">
      <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://www.market-pedia.id'" class="btn mr-2">Contoh 4</button>
    <!-- end contoh 4 -->
     
  </div>
</body>
</html>

Untuk mempercantik tampilan button yang sudah kita membuat diatas agar nampak lebih keren saat ini kita tambahkan script css nya selanjutnya ini kedalam script html yang sudah kita membuat . Untuk mengimbuhkan script css selanjutnya mampu dilakukan dengan 2 cara yaitu mampu dengan mengimbuhkan script css di di dalam tag <style></style> konsisten kita meletakkan pada tag <head> html. Atau kalian mampu juga mengimbuhkan file css kedalam folder yang sama dengan file html kita tadi kemudian membuat penghubung agar file css selanjutnya mampu terakses berasal dari script 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 total programnya dapat menjadi seperti selanjutnya ini :

<!DOCTYPE html>
<html>
<head>
    <title>Cara Membuat Button di HTML - https://www.market-pedia.id</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://www.market-pedia.id">
      <button type="submit" class="btn mr-2">Contoh 1</button>
     </form>
     <!-- end contoh 1 -->
 
     <!-- Contoh 2 menggunakan form dan input -->
     <form action="https://www.market-pedia.id">
      <input type="submit" value="submit value" class="btn mr-2" />
     </form>
     <!-- end contoh 2 -->
 
     <!-- Contoh 3 menggunakan tag <a> -->
     <a href="https://www.market-pedia.id" class="btn mr-2">Contoh 3</a>
     <!-- end contoh 3 -->
     
    <!-- Contoh 4 menggunakan tag button -->
        <button onclick="window.location.href='https://www.market-pedia.id'" class="btn mr-2">Contoh 4</button>
    <!-- end contoh 4 -->
     
  </div>
</body>
</html>

Setelah itu coba melaksanakan script selanjutnya . Ingat kalau kalian mau menjalankan script selanjutnya di localhost pastikan website layanan kalian sudah terjadi . Jika kalian belum menginstall website layanan di pc kalian , kalian mampu ikuti tutorial selanjutnya ini tentang cara menginstall xampp di windows . Hasil berasal dari script program diatas dapat menjadi seperti selanjutnya ini kalau dijalankan:

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