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.
Tags:
Coding
