Tutorial Pemrograman

Cara Membuat Link Hover Ikon pada Google Icons

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.

Kamu akan berpikir cara menambahkan ikon pada elemen object tertentu, seperti tombol submit, pesan peringatan, atau sekedar membuat ikon saja ke dalam website kamu tanpa menggunakan image atau gambar, melainkan menggunakan font material icon yang dikenal dengan Google Icons. Google Icons ini bisa dijadikan alternatif dari font Awesome dalam menambahkan ikon terhadap object tertentu.

Kamu bisa mengatur warna pada link hover terhadap ikon tersebut. Ini berguna ketika ada si pengunjung (visitor) ingin klik ikon tersebut, pasti mereka menggeser mouse sehingga kursor akan bergeser ke arah ikon tersebut, disitulah terjadi ada perubahan warna. Kamu bisa membuat link hover dengan kode script hover.

Berikut cara membuat link hover ikon pada Google Icons dengan CSS.

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 “hover-google-icons.html”.

5. Klik Save.

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

Lihat hasil pada tampilan awal.

Lihat hasil pada tampilan setelah ikon itu dikursor.

Selesai.

Catatan: Apabila kamu ingin menggunakan Google Icons ini, maka kamu wajibkan menambahkan kode script di bawah ini.

Letakkan kode script ini di atas barisan </head>. Kemudian kamu bisa tambahkan kode script untuk memasukkan ikon tersebut. Kamu bisa membuat link hover ikon pada Google Icons menggunakan CSS baik secara internal maupun eksternal. Namun kode script hover tidak bisa digunakan dengan cara inline.

Apabila kamu ingin membuat link hover ikon pada Google Icons memakai CSS internal atau eksternal. Maka, kamu bisa tambahkan kode script CSS di bawah ini.

Apabila kamu ingin memisahkan atau membedakan beberapa ikon pada Google Icons. Kamu bisa terapkan kode script di bawah ini.

Kamu bisa lihat contoh pada kode script di bawah ini.

Maka, membuat link hover di dalam CSS harus dipisahkan juga. Contoh pada kode script di bawah ini.

Maka, kedua ikon akan menghasilkan sesuatu yang berbeda walaupun nama class-nya sama-sama yakni material-icons. Begitu juga membuat 3 atau lebih link hover pada ikon tersebut dengan warna yang berbeda. Yang membedakan adalah penamaan pada class 2.

Kini, kamu bisa membuat link hover ikon pada Google Icons sesuai dengan fungsi dari ikon terhadap object pada website kamu. Object disini yang dimaksudkan seperti button, div, table, link, radiobutton, checkbox, dan sebagainya.

Demikian tutorial cara membuat link hover ikon pada Google Icons 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