Cara Membuat Button Tampilan IOS Dengan HTML dan CSS

Halo teman – teman semuanya, berjumpa kembali dengan saya di tips dan trik Dumet School. Pada kesempatan kali ini saya akan memberikan tutorial tentang Cara Membuat Button Tampilan IOS Dengan HTML dan CSS, seperti yang kita tahu kalau button tampilan ios sangatlah berbeda dengan tampilan button android. Dan di dalam html css, kita pun juga bisa membuatnya mirip seperti pada tampilan ios nah di bawah ini adalah gambar screen shoot button tampilan ios nya

Seperti yang teman – teman lihat pada gambar di atas ini, button berwarna hijau kalau di klik on, begitu klik off berwarna gray

Kali ini kita akan membuatnya murni dengan html dan css saja, dan bisa klik on dan of, teman – teman ikuti terus supaya dapat juga implementasikan Cara Membuat Button Tampilan IOS Dengan HTML dan CSS dan nanti jika sudah jadi teman – teman bisa pakai dan eksperimen sendiri dari hasil latihan kali ini. Baik, mari kita mulai praktekkan seperti biasa kita siapkan text editornya lalu kita ketikkan script html nya persis di bawah ini

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><strong>Cara Membuat Button Tampilan IOS Dengan HTML dan CSS</strong></title>
</head>
<body>
	<input type="checkbox" id="demo">
	<label for="demo"></label>
</body>
</html>

Yang kita butuh hanyalah tag input dan tag label html kemudian kita hubungkan dengan id dan for, teman – teman ketikkan html nya persis dengan script di atas ini. Berikutnya kita tambahkan cssnya untuk merubah layout menjadi tampilan ios

               [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
		  position: absolute;
		  left: -9999px;
		}
		[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
		  position: relative;
		  padding-left: 4em;
		  padding-top: .25em;
		  cursor: pointer;
		}
		[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before, [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
		  content: '';
		  position: absolute;
		  height: 1.5em;
		  transition: all .5s ease;
		}
		[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {
		  left: 0;
		  top: 0;
		  width: 3em;
		  border: 2px solid #dddddd;
		  background: #dddddd;
		  border-radius: 1.1em;
		  z-index: -1;
		}
		[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
		  left: .15em;
		  top: .125em;
		  background-color: #fff;
		  border-radius: 50%;
		  width: 1.5em;
		}
		[type="checkbox"]:checked + label:after { left: 1.65em; }
		[type="checkbox"]:checked + label:before {
		  background-color: #72da67;
		  border-color: #72da67;
		}

Kemudian save dengan nama index.html dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Jika di klik maka akan berwarna hijau

Jika kita ingin membuatnya lebih dari satu, kita hanya copy saja tag html nya dan mengganti nama id dan for nya, saya akan coba menambahkan 2 button lagi berarti seperti ini

Maka hasilnya menjadi seperti ini

Cukup menarik bukan..?? Teman – teman bisa lihat demonya dengan klik link ini

Baik, cukup sekian pada artikel kali ini tentang Cara Membuat Button Tampilan IOS Dengan HTML dan CSS kita berjumpa kembali pada tips dan trik yang akan datang.

Terimakasih dan Sampai Jumpa.

Semoga Bermanfaat 🙂

Cara Membuat Button Tampilan IOS Dengan HTML dan CSS

Kategori