Tutorial membuat social media icons dengan html css

Tutorial kali ini saya mau membuat social media icon menggunakan html dan css.

Dengan tampilan seperti dibawah ini.

Berikut ini cara membuatnya

Social media icons dengan html dan css

Ketikan kode html dibawah ini


<!DOCTYPE html>
<html lang="in">
<head>
    <title>Social Media Icon</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"></link>
    <style>
        * {   
            margin: 0;                                   
            padding: 0;
            box-sizing: border-box;
        }

        body {
           min-height: 100vh;
           display: flex;
           justify-content: center;
           align-items: center;
           background: #fefefe;
        }

       .container {
           display: flex;
           justify-content: space-evenly;
           width: 230px;
           height: 100%;
        }

       span {
           position: relative;
           background: #1cbfc3;
           text-align: center;
           width: 100%;
           color: white;
           padding: 10px; 
           font-size: 2.5em;
           border-radius: 50%;
           overflow: hidden;
           margin-left: 10px;
        }

       span:before {
           position: absolute;
           top: 0;
           left: -100%;
           content: '';
           height: 100%;
           width: 40px;
           background: rgba(255,255,255,0.6);
           transform: skewX(-10deg);
           transition: 2s;
        }

       span:hover:before {
           left: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <span><i class="fab fa-facebook"></i></span>
        <span><i class="fab fa-whatsapp"></i></span>
        <span><i class="fab fa-github"></i></span>
    </div>
</body>
</html>

Dari kode diatas saya mau menjelaskan bahwa pada kodingan bagian ini

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

pada kodingan diatas merupakan tag css yang merujuk pada librari css yang akan digunakan pada website. Dapat dilihat kalau link diatas merupakan link untuk memanggil fontawesome untuk nantinya memanggil icon yang akan digunakan nantinya pada website.

Lalu didalam tag <style> ini saya menuliskan kode css untuk mengatur halaman web nantinya.

pada bagian kodingan ini


  * {   
       margin: 0;                                   
       padding: 0;
       box-sizing: border-box;
    }

yaitu kodingan css diatas seperti selector * itu merupakan selector universal yang mewakili semua elemen yang ada didalam website. sehingga ketika saya membuat properti margin: 0; padding: 0; dan box-sizing: 0; itu menandakan nantinya setiap elemen website akan akan mempunyai margin dan padding = 0 alias tak memiliki margin dan padding.

sedangkan untuk css elemen body yaitu


  body {
         min-height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
         background: #fefefe;
     }

pada pengaturan css elemen body diatas saya mau untuk bodynya 100vh yang nantinya tingginya akan mengambil seluruh tampilan layar monitor di segala device(Laptop, PC maupun HP).

pada pengaturan css body diatas saya juga menggunakan flexbox dengan cara display: flex; dan menggunakan properti lain dari flex box seperti justfy-content: center; untuk memposisikan element berada ditengah secara horizontal dan align-items: center; elemen berada ditengah secara vertikal. Kemudian dengan menambahkan background: #fefefe;.

Lalu pada settingan css container yaitu


.container {
           display: flex;
           justify-content: space-evenly;
           width: 230px;
           height: 100%;
        }

Saya masih menggunakan flexbox cuma dengan properti justify-content: space-evenly; dengan begitu nantinya setiap elemen didalam container akan memiliki jarak menyesuaikan lebar si container. Dengan lebar ukuran container 230px serta tinggi container 100%.

Selanjutnya di bagian pengaturan elemen cssnya yaitu icon social medianya saya atur dengan css seperti ini


      span {
           position: relative;
           background: #1cbfc3;
           text-align: center;
           width: 100%;
           color: white;
           padding: 10px; 
           font-size: 2.5em;
           border-radius: 50%;
           overflow: hidden;
           margin-left: 10px;
        }

       span:before {
           position: absolute;
           top: 0;
           left: -100%;
           content: '';
           height: 100%;
           width: 40px;
           background: rgba(255,255,255,0.6);
           transform: skewX(-10deg);
           transition: 2s;
        }

       span:hover:before {
           left: 100%;
        }