Cara Membuat Button Link Di HTML

Pada tutorial ini kita akan belajar sedikit trik dalam HTML, yaitu trik cara membuat button link di HTML. Untuk membuat button link ada beberapa cara, yaitu bisa menggunakan form yang hanya memiliki button submit. Dan tentunya form tersebut memiliki action ke link yang dituju, dan dengan method post. Selain itu juga bisa membuat link button dengan cara hanya menggunakan tag HTML button, namun pada tag tersebut ditambah kode JavaScript event onclick. Dan selain itu juga membuat button link bisa menggunakan tag HTML link, yang tampilannya dirubah menggunakan CSS menjadi seperti button. Untuk cara membuat masing-masing button silakan simak pada masing-masing poin dibawah.

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 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!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>

Pada atribut action tersebut bisa berisi alamat link absolute dan relatif.

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 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!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>

Pada contoh kode button diatas, value dari atribut onclik merupakan kode JavaScript.

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 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!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>

Dari beberapa contoh button link diatas saya lebih suka button yang menggunakan CSS. Karena button tersebut bisa kita beri style sesuka kita, supaya tampilannya lebih menarik. Dan dari ketiga janis button link diatas apabila dibuat dalam satu halaman HTML akan tampil seperti ini :

Gambar Hasil Kode Membuat Button Link Di HTML

Demikian untuk tutorial cara membuat button link di HTML ini, apabila kamu memiliki pertanyaan seputar tutorial ini silakan sampaikan pada kolom komentar dibawah.

Cari Blog Ini

Sofyan Yusuf © 2019