Membuat Tombol Share Social Media Dengan HTML Dan CSS

Unknown   February 18, 2018   CSS   1 comment  

Hai semuanya, pada tutorial kali ini kita akan belajar mengenai cara membuat design tombol share social media menggunakan HTML dan CSS.

Pertama, untuk mendapatkan icon Facebook, Twitter dan Google Plus, kita akan menggunakan sebuah library icon yaitu Font Awesome, untuk menggunakannya tambahkan link dibawah ini dibawah tag <title>.

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

Kedua, tulis syntax HTML seperti dibawah ini.

<div class="container">
  <h1>Bagikan artikel ini ke </h1>
    <div class="facebook">
      <span class="fa fa-facebook"></span>
    </div>
    <div class="twitter">
      <span class="fa fa-twitter"></span>
    </div>
    <div class="google-plus">
      <span class="fa fa-google-plus"></span>
    </div>
</div>

Selanjutnya, tulis syntax CSS seperti dibawah ini.

.container{
    width: 500px;
    margin: auto;
  }
  .facebook,.twitter,.google-plus{
    display: inline-block;
    margin-right: 5px;
  }
  .facebook{
    width: 40px;
    height: 40px;
    background-color: #2a4299;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
  }
  .twitter{
    width: 40px;
    height: 40px;
    background-color: #3899fe;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
  }
  .google-plus{
    width: 40px;
    height: 40px;
    background-color: #fb2929;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
  }

Untuk hasilnya dapat dilihat pada gambar dibawah ini.

Demikian, cara membuat tombol share dengan HTML dan CSS, jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.

Semoga Bermanfaat