Tutorial 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:
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.
test
21 Desember 2022nice