HTML button tag

HTML Elemen <button> adalah salah satu dari komponen pada html yang sering kita jumpai di halaman website. biasanya digunakan ketika kita ingin mengirim data dari formulir atau digunakan sebagai tombol perintah lainya di HTML, button hampir sama dengan submit namun button punya tag tesendiri dan properti defaulnya berbeda biasanya berhubungan dengan kontrol javascript.

1. html tag <button> bawaan

button bawaan nampak seperti biasa tidak ada keistimewaan dari jenis segi bentuk tersebut, agar terlihat lebih menarik anda harus menghubungkanya dengan style css. di dalam button memiliki banyak atribut seperti even onclick apabila tombol di klik maka akan memanggil perintah ke javascript interaktif mengenai peristiwa yang terjadi pada halaman web html. hasil contoh akan terlihat seperti di bawah ini.

<!DOCTYPE html>
<html>
<body>
<h2>Contoh: HTML Element button </h2><hr>
<!--default button-->
<button type="button" onclick="alert('Hello world!')">Klik Disini!</button>
</body>
</html>

Cicagak Berbagi

2. html tag <button> dengan style css

button menggunkan style css akan terlihat lebih menarik di bandingkan dari bawaannya.

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family:monospace;}
button {border:1px solid transparent; padding:5px; background:coral; color:white;}
button:hover {border:1px solid #ffe; box-shadow:0 0 2px #454545;  background:#1AA260; cursor:pointer;}
</style>
</head>
<body>
<h2>Contoh: HTML Element button dengan style css </h2><hr>
<!--Begin button-->
<button type="button" onclick="alert('button style dengan CSS')">Klik Disini !</button> Button Hover Css
</body>
</html>

Cicagak Berbagi

3. html tag <button> gunakan lebih banyak style

lebih banyak menggunakan atribut style css hasil pun lebih unik dan menarik nampak di bawah ini seperti button glass

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family:monospace;}
.glass{
	/* gaya latar belakang */
	display: inline-block;
	padding: 15px 25px;
	background-image: linear-gradient(green,lightgreen);
	background-color: green; /*dukungan untuk browser lama*/
	border:none;
	border-radius: 3px;
	box-shadow: 0px 1px 4px -2px #333;
	text-shadow: 0px -1px #333;
	position: relative;
	/* gaya tulisan */
	text-decoration: none;
	color: #fff;
	font-size: 16px;
	font-family: arial;
	font-weight: bold;
}
.glass:after{
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
	content: '';
	top: 2px;
	left: 2px;
	height: 40%;
	width: calc(100% - 4px);
	position: absolute;
}
.glass:hover{background: linear-gradient(#073,#0fa); cursor:pointer;}
</style>
</head>
<body>
<h2>Contoh: HTML Element button gunakan lebih banyak style css </h2><hr>
<!--Begin button-->
<button class="glass" type="button" onclick="">Klik Disini !</button><br><br>
</body>
</html>

Cicagak Berbagi

4. html tag <button> klik memanggil Javascript

Jika salah satu button di klik maka akan memanggil fungsi javascript bisa dilihat contoh di bawah

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family:monospace;}
.button {
  border: none;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.4s;
}
.merah { background-color: white; color: black; border: 2px solid #E30B5D;}
.merah:hover { background-color: #E30B5D;color: white;}
.hijau { background-color: white; color: black; border: 2px solid #04AA6D;}
.hijau:hover { background-color: #04AA6D;color: white;}
.biru { background-color: white; color: black; border: 2px solid #6698FF;}
.biru:hover { background-color: #6698FF; color: white;}

</style>
</head>
<body>
<h2>Contoh: HTML Element button dengan style css dan klik memanggil javascript</h2><hr>
<h2 id="myBtnSelected"></h2>
<!--Begin button-->
<button id="merah" class="button merah" type="button" onclick="myBtnMerah()">Merah</button>
<button id="hijau"class="button hijau" type="button" onclick="myBtnHijau()">Hijau</button>
<button id="biru"class="button biru" type="button" onclick="myBtnBiru()">biru</button>

<script>
function myBtnMerah () { document.getElementById("myBtnSelected").innerText = "Ini adalah button: " + merah.innerText ;}
function myBtnHijau () { document.getElementById("myBtnSelected").innerText = "Ini adalah button: " + hijau.innerText ;}
function myBtnBiru () { document.getElementById("myBtnSelected").innerText = "Ini adalah button: " + biru.innerText ;}
</script>
</body>
</html>

Cicagak Berbagi