Cara Membuat Button Tampilan IOS Dengan HTML dan CSS
Halo teman – teman semuanya, berjumpa kembali dengan saya di tips dan trik Source Code Aplikasi. Di kesempatan kali ini saya akan memberikan panduan mengenai 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 pada html css, kita pun pun dapat membuatnya mirip seperti di tampilan ios nah di bawah ini yaitu gambar screen shoot button tampilan ios nya
Seperti yang teman – teman lihat di gambar di atas ini, button berwarna hijau kalau di klik on, seperti itu klik off berwarna gray
Kali ini kita akan membuatnya murni dengan html dan css saja, dan dapat klik on dan of, teman – teman ikuti terus supaya dapat pun implementasikan Cara Membuat Button Tampilan IOS Dengan HTML dan CSS dan nanti kalau telah jadi teman – teman dapat gunakan dan eksperimen sendiri dari hasil latihan kali ini. Bagus, mari kita mulai praktekkan seperti lazim 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 Merancang 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 bagi 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 di browsernya, karenanya hasilnya seperti gambar di bawah ini
Jikalau di klik karenanya akan berwarna hijau
Jikalau 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
Karenanya hasilnya menjadi seperti ini
Lumayan menarik bukan..?? Teman – teman dapat lihat demonya dengan klik link ini
Bagus, lumayan demikianlah di artikel kali ini mengenai Cara Membuat Button Tampilan IOS Dengan HTML dan CSS kita berjumpa kembali di tips dan trik yang akan datang.
Terimakasih dan Hingga Jumpa.
Semoga Bermanfaat 🙂
Sumber https://kursuswebsite.org
