Thanh social media liên hệ trượt 1 bên website kiểu đơn giản

Hôm nay mình sẽ hướng dẫn các bạn làm thanh social liên hệ trượt dọc 1 bên website kiểu đơn giản, mình thích kiểu này vì nó ít hiệu ứng và người xem không bị nhàm chán.
Đầu tiên HTML mở đầu câu chuyện

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
    <div class="share facebook">
        <i class="fa fa-facebook" aria-hidden="true"></i>
    </div>
    <div class="share twitter">
        <i class="fa fa-twitter" aria-hidden="true"></i>
    </div>
    <div class="share reddit">
        <i class="fa fa-reddit-alien" aria-hidden="true"></i>
    </div>
    <div class="share google">
        <i class="fa fa-google" aria-hidden="true"></i>
    </div>
    <div class="share whatsapp">
        <i class="fa fa-whatsapp" aria-hidden="true"></i>
    </div>
</div>

CSS tô màu câu chuyện

.share{
    width: 38px;
    height: 38px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s linear;
}
.share .fa{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 25px;
}
.share.facebook{
    background: #3b5998;
}
.share.twitter{
    background: #55acee;
}
.share.reddit{
    background: #ff4500;
}
.share.google{
    background: #dd4b39;
}
.share.whatsapp{
    background: #4dc247;
}
.share:hover{
    width: 70px;
}

Bạn có thể chủ động tuỳ biến màu sắc và số lượng icon tuỳ theo nhu cầu.
Ở đây dùng icon fontawesome.
Kết quả sẽ giống ảnh đại diện bài viết mà bạn thấy.

Chúc bạn thành công. Have a nice day.
Vui lòng ghi rõ nguồn khi chia sẻ. Thanks.