Tombol Night Mode Sederhana

tombol night mode sederhana

Hai kawan, kali ini saya akan memberikan salah satu contoh penggunaan dari HTML, CSS, dan Javascript yaitu Tombol Night Mode Sederhana. Atau bisa juga disebut Dark Mode.

Dark Mode atau Mode Malam merupakan salah satu fitur yang dapat membuat tampilan sebuah website atau aplikasi menjadi gelap. Fitur ini banyak dijumpai di aplikasi atau website medial sosial seperti Youtube, Facebook, dan Twitter dan lain-lain.

Di tutorial kali ini, saya akan membagikan sedikit tutorial Cara Membuat Tombol Dark Mode sederhana. Jika kamu tertarik dengan fitur ini, kamu bisa langsung simak tutorial berikut ini.

Cara Membuat Tombol Night Mode Sederhana

Berikut ini adalah cara membuat Tombol Night Mode Sederhana menggunakan html, css, dan javascript.

1. Membuat bagian HTML

Untuk yang pertama silahkan kalian membuka text editor kesayangan kalian. Bisa menggunakan Notepad, Sublime Text, VS Code, atau sejenisnya.

Setelah membuka text editor silahkan membuat file kosong baru(bisa dengan ctrl+n) lalu salin kode di bawah ini lalu simpan simpan dengan nama index.html.

2. Membuat bagian CSS

Silahkan salin kode berikut pada file baru yang kosong lalu simpan dengan nama style.css.

3. Membuat bagian Javascript

Pada bagian Javascript silahkan kalian isi dengan kode dibawah ini lalu simpan dengan nama script.js.

Jika semua file sudah di-save, silahkan taruh ketiga file tadi dalam satu folder yang sama sebelum dijalankan. Cara menjalankannya adalah dengan membuka index.html dengan browser (Chrome/ Mozilla/ dll).

Kalian bisa melihat demo seperti dibawah ini. jangan takut mencoba, semoga berhasil.

Dark mode button

Sekian dulu untuk saat ini, dukung Cahpanjer dengan share artikel Cahpanjer ke teman, orang tua, saudara, kerabat, pacar, mantan, dan orang-orang yang ada di sekitarmu agar Cahpanjer semakin dikenal dan populer.

Semoga bermanfaat, Bye . . .

About Ilham Taufiq 8 Articles
Seorang penulis di cahpajer.com

Be the first to comment

Leave a Reply