Cara Membuat Efek Hover Icon dengan CSS3

Cara Membuat Efek Hover Icon dengan CSS3 - Pada tutorial kali ini saya akan bagikan tutorial sederhana dengan CSS3 yakni bagaimana Cara Membuat Efek Hover Icon dengan CSS3, mungkin diantara kalian ada yang sudah tidak asing lagi yah dengan efek hover ini, tapi tidak ada salahnya kalian coba untuk menambah referensi dalam membuat efek dengan CSS3. Baiklah, langsung saja saya akan mempraktekan Cara Membuat Efek Hover Icon dengan CSS3 berikut ini.

Sebelum memulai mengetikan sintak - sintak, untuk membuat efek hover icon kalian wajib mempersiapkan bahan seperti icon berikut ini.

Langkah 1 : Cara Membuat Efek Hover Icon dengan CSS3

Kita mulai dengan langkah pertama, yakni kita akan membuat sutruktur HTML dan mengisikan gambar icon seperti berikut.

<body>
    <div id="wrapper">
        <a href="#" class="icon icon1"><span></span><img src="icon.png"></a>
        <a href="#" class="icon icon2"><span></span><img src="clock.png"></a>
    </div>
</body>

Langkah 2 : Cara Membuat Efek Hover Icon dengan CSS3

Langkah berikutnya, untuk membuat efek hover icon, tentu kita akan menggunakan CSS3. Untuk itu silahkan ketikan sintak CSS3 berikut.

body {
    padding: 25px;
}
#wrapper {
    width: 900px;
    margin: auto;
    padding: 10px;
}
.icon {
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: 200px;
    margin: 0 100px;
    position: relative;
    width: 200px;
}
img {
    position: relative;
    z-index: 9;
    width: 150px;
    margin-left: 103px;
    margin-top: 105px;
}
.icon span {
    border-radius: 0;
    display: block;
    height: 0; width: 0;
    left: 50%; top: 50%;
    margin: 0;
    position: absolute;
    transition: all 0.3s;
    margin-left: 50px;
}
.icon:hover span {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: -1.3rem;
}
.icon1 span {
    background-color: #34ace0;
}
.icon2 span {
    background-color: #ff5252;
}

Setelah semua sintak telah diketikan semua, silahkan simpan dengan nama index.html kemudian silahkan buka pada browser masing - masing dan lihat hasilnya. Jika kursor diarahkan terhadap icon maka akan terjadi efek hover icon nya.

Baik, cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Efek Hover Icon dengan CSS3, semoga bermanfaat dan bisa membantu buat kalian yang baru belajar mengenai HTML dan CSS. Selamat mencoba :)

7 Mei 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat