assalamualaikum wr.wb
Button Link Dengan Form
Untuk membuat link button dengan memanfaatkan form caranya cukup mudah. Seperti yang sudah dijelaskan diatas, kamu hanya membuat tag from dengan atribut action berisi link yang dituju, dan atribut method dengan value post. Dan tentunya jangan lupa sebuah tag button yang memiliki atribut type submit. Untuk lebih jelasnya silakan simak contoh kode berikut ini :|
|
<!DOCTYPE html>
<html>
<head>
<title>Contoh Button Link</title>
</head>
<body>
<!-- Contoh 1 -->
<form method="post" action="namafile.html">
<button type="submit">Link 1</button>
</form>
<br>
<!-- Contoh 2 -->
<form method="post" action="https://carakode.com">
<button type="submit">Link 2</button>
</form>
</body></html>
|
Button Link Dengan JavaScript
Untuk menggunakan button link dengan JavaScrip tentunya supaya botton dapat bekerja maka browser user harus sudah mendukung JavaScript. Dan berikut contoh kodenya :|
|
<!DOCTYPE html>
<html>
<head>
<title>Contoh Button Link</title>
</head>
<body>
<!-- Contoh 1 -->
<button onclick="window.location.href='namafile.html'">Link 1</button>
<br><br>
<!-- Contoh 2 -->
<button onclick="window.location.href='https://carakode.com'">Link 2</button>
</body></html>
|
Button Link Dengan Tag Link Dan CSS
Pada contoh ini kita akan merubah style link menjadi seperti button dengan menggunakan CSS. Dan untuk contoh kodenya sebagai berikut :|
|
<!DOCTYPE html>
<html>
<head>
<title>Contoh Button Link</title>
<style>
.link-button{
text-decoration: none;
background-color: #eeeeee;
color: black;
padding: 2px 6px 2px 6px;
border: 1px solid #c2c2c2;
border-radius:2px;
}
</style>
</head>
<body>
<!-- Contoh 1 -->
<a href="komentar.html" class="link-button">Link 1</a>
<br><br>
<!-- Contoh 2 -->
<a href="https://carakode.com" class="link-button">Link 2</a>
</body>
</html>
|
Demikian untuk tutorial cara membuat button link di HTML ini, apabila kamu memiliki pertanyaan seputar tutorial ini silakan sampaikan pada kolom komentar dibawah.
Tidak ada komentar:
Posting Komentar