Tutorial Pemrograman

Cara Membuat Floating Button dengan CSS

CSS singkatan dari Cascading Style Sheets. CSS adalah salah satu bahasa markup yang berfungsi khusus untuk merancang tampilan pada website agar hasil tampilan website lebih maksimal dan sesuai kebutuhan klien atau perusahaan.

Floating button adalah tombol yang berbentuk lingkaran yang terletak di sekitar pojok. Tombol ini tidak bergerak apabila melakukan scroll pada website.

Misalkan, kamu membuat sebuah floating button untuk menambahkan data anggota baru yang melakukan pendaftaran di dalam website kamu. Dengan adanya fitur floating button, si pengunjung (visitor) diharapkan memudahkan dalam melakukan pendaftaran.

Kamu ingin membuat floating button untuk mencantumkan sebuah informasi kontak seperti nomor WhatsApp (WA) untuk konsumen agar si konsumen dapat melakukan komunikasi dalam pemesanan suatu produk yang tersedia di website kamu.

Penulis akan berikan tutorial cara membuat floating button dengan CSS.

A. MEMBUAT KERANGKA FLOATING BUTTON DENGAN HTML

1. Silahkan buka teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “floating-button-css.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome atau Mozilla).

Berikut hasilnya.

Catatan:

Pada kode script di atas, sebenarnya bisa berjalan, namun karena belum ada file style.css di dalam project kamu sehingga tampilannya seperti kerangka awal.

B. MEMBUAT FLOATING BUTTON DENGAN CSS

1. Klik File → New atau tekan CTRL + N untuk membuat halaman baru pada text editor.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “style.css”.

5. Klik Save.

6. Silahkan tekan F5 pada web browser kamu. Lihat hasilnya.

Selesai.

Kini, kamu bisa membuat floating button sendiri di dalam project website kamu baik tanpa CMS maupun dengan CMS dalam segala keperluan.

Demikian tutorial cara membuat floating button dengan CSS. Selamat mencoba.









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top