Cara Membuat Popup Teks pada Icon

Cara Membuat Popup Teks pada Icon - Membuat efek dan kreasi elemen dengan CSS saat ini sudah sangat mudah sekali, karena CSS saat ini sudah mendukung berbagai macam untuk melakukan itu semua, seperti animasi, efek, dan kreasi lainnya. Di artikel DUMET School kali ini, akan saya share tutorial sederhana tentang CSS yaitu bagaimana Cara Membuat Popup Teks pada Icon. Buat kalian yang ingin mencoba membuat icon dan ada popup teksnya, silahkan bisa ikuti langkah-langkahnya berikut ini.

Langkah pertama untuk membuat popup teks pada icon adalah membuat file index.html kemudian kalian bisa ketikkan struktur HTML sederhana berikut untuk icon dan teks popupnya.

<body>
    <div>
      <a href="#"><span>Facebook</span></a>
      <a href="#"><span>Twitter</span></a>
      <a href="#"><span>Instagram</span></a>
      <a href="#"><span>Linked In</span></a>
    </div>
</body>

Setelah membuat struktur HTML seperti di atas, langkah selanjutnya adalah menambahkan style CSS untuk membuat popup teks pada iconnya. Silahkan kalian ketikkan sintak CSS berikut ini.

body {
    background-color:#F0D20B;
    text-align:center;
}
div {
    display: inline-block;
    position:absolute;
    top:50%;
    left:50%;
    -ms-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}
a {
    color:#fff;
    background: #382B14;
    border-radius:4px;
    text-align:center;
    text-decoration:none;
    font-family:fontawesome;
    position: relative;
    display: inline-block;
    width:40px;
    height:28px;
    padding-top:12px;
    margin:0 2px;
    -o-transition:all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    -webkit-font-smoothing: antialiased;
}
a:hover {
    background: #FAE29A;
    color: #382B14;
}
a span {
    color:#666;
    position:absolute;
    font-family:sans-serif;
    bottom:0;
    left:-25px;
    right:-25px;
    padding:5px 7px;
    z-index:-1;
    font-size:14px;
    border-radius:2px;
    background:#fff;
    visibility:hidden;
    opacity:0;
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
a span:before {
    content:'';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    position:absolute;
    bottom:-5px;
    left:40px;
}
a:hover span {
    bottom:50px;
    visibility:visible;
    opacity:1;
}
    a:nth-of-type(1):before {
    content:'\f09a';
}
    a:nth-of-type(2):before {
    content:'\f099';
}
    a:nth-of-type(3):before {
    content:'\f16d';
}
    a:nth-of-type(4):before {
    content:'\f0e1';
}

Pada kasus ini, saya menggunakan icon dari font awesome secara online. Silahkan kalian juga bisa menyesuaikan bisa offline atau online.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Jika sudah selesai semua sintak HTML dan CSS diketikkan, silahkan simpan file-nya. Kemudian kalian bisa buka pada browser masing- asing dan lihat hasilnya. Maka hasilnya akan terlihat seperti gambar di bawah ini.

Cara Membuat Popup Teks pada Icon

Baiklah, cukup sekian tutorial CSS sederhana bagaimana Cara Membuat Popup Teks pada Icon. Semoga bermanfaat dan selamat mencoba.

26 Januari 2020

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