Social Media like buttons

Nowadays Social Media become most important in our life. Everyone on Social Media to stay connected with their loved ones and stay updated.   On the other hand, Social Media become a powerful tool of advertisement. Everyone who want to advertise and collect an audience. So its necessary you have some follow buttons on the website to which navigate the audience to find right connection and keep updated.

Today we are presenting some Follow us Social Media buttons. Hope You will like it.
You should find demo here
Demo

CSS For Examples:

CSS is same for all Social Media Buttons. You should use the CSS for the correct functioning of buttons

<style>
   .fb {
            background-color: #3b5998;
            /*facebook*/
        }
        
        .twtr {
            background-color: #00b6f1;
            /*twitter*/
        }
        
        .yt {
            background-color: #ff0000;
            /*youtube*/
        }
        
        .instamgnt {
            background-color: #c32aa3;
            /*instagram magenta*/
        }
        
        .instablu {
            background-color: #4c5fd7;
            /*instagram blue*/
        }
        
        .instaprpl {
            background-color: #7232bd;
            /*instagram purple*/
        }
        
        .instaorng {
            background-color: #f46f30;
            /*instagram orange*/
        }
        
        .instaylw {
            background-color: #ffdc7d;
            /*instagram yellow*/
        }
        
        .pntrst {
            background-color: #cb2027;
            /*pinterest*/
        }
        
        .gglpls {
            background-color: #df4a32;
            /*google plus*/
        }
        
        .lnkdn {
            background-color: #007bb6;
            /*linkedin*/
        }
        
        .vimeoblu {
            background-color: #45bbff;
            /*vimeo blue*/
        }
        
        .vimeogrn {
            background-color: #aad450;
            /*vimeo green*/
        }
        
        .vimeoorng {
            background-color: #f7b42c;
            /*vimeo green*/
        }
        
        .vimeopnk {
            background-color: #f27490;
            /*vimeo pink*/
        }
        
        .tmblr {
            background-color: #2c4762;
            /*tumbler*/
        }
        
        .snpcht {
            background-color: #fffc00;
            /*snapchat*/
        }
        
        .whtsapgrn {
            background-color: #25d366;
            /*whatsapp green*/
        }
        
        .whtsaptl1 {
            background-color: #075e54;
            /*whatsapp teal1*/
        }
        
        .whtsaptl2 {
            background-color: #128c7e;
            /*whatsapp teal2*/
        }
        
        .frsqrpnk {
            background-color: #fc4575;
            /*four square pink*/
        }
        
        .frsqrblu {
            background-color: #2d5be3;
            /*four square blue*/
        }
        
        .swrm {
            background-color: #ffb000;
            /*swarm*/
        }
        
        .skypblu {
            background-color: #00aff0;
            /*skype blue*/
        }
        
        .skypgrn {
            background-color: #7fba00;
            /*skype green*/
        }
        
        .andrd {
            background-color: #a4c639;
            /*android*/
        }
        
        .stmblupn {
            background-color: #eb4924;
            /*stumble upon*/
        }
        
        .flkrpnk {
            background-color: #f40083;
            /*flicker pink*/
        }
        
        .flkrblu {
            background-color: #006add;
            /*flicker blue*/
        }
        
        .yaho {
            background-color: #430297;
            /*yahoo*/
        }
        
        .sndcld {
            background-color: #ff5500;
            /*soundcloud*/
        }
        
        .sptfygrn {
            background-color: #1ed760;
            /*spotify green*/
        }
        
        .sptfydrkgrn {
            background-color: #1db954;
            /*spotify dark green*/
        }
        
        .drbl {
            background-color: #ea4c89;
            /*dribbble*/
        }
        
        .rdt {
            background-color: #ff5700;
            /*reddit*/
        }
        
        .dvntart {
            background-color: #4a5d4e;
            /*devian art*/
        }
        
        .pkt {
            background-color: #ee4056;
            /*pocket*/
        }
        
        .qra {
            background-color: #aa2200;
            /* quora*/
        }
        
        .qrablu {
            background-color: #2b6dad;
            /*quora blue*/
        }
        
        .sldshrorng {
            background-color: #f7941e;
            /*slideshare orange*/
        }
        
        .sldshrblu {
            background-color: #1191d0;
            /*slideshare blue*/
        }
        
        .fvhndrdpx {
            background-color: #0099e5;
            /*five hundred pixels*/
        }
        
        .lstlyorng {
            background-color: #df6d46;
            /*listly orange*/
        }
        
        .lstlyblu {
            background-color: #52b1b3;
            /*listly blue*/
        }
        
        .vin {
            background-color: #00b489;
            /*vine*/
        }
        
        .fb,
        .twtr,
        .yt,
        .instamgnt,
        .instablu,
        .instaprpl,
        .instaorng,
        .pntrst,
        .gglpls,
        .lnkdn,
        .vimeoblu,
        .vimeogrn,
        .vimeoorng,
        .vimeopnk,
        .tmblr,
        .whtsapgrn,
        .whtsaptl1,
        .whtsaptl2,
        .frsqrpnk,
        .frsqrblu,
        .swrm,
        .skypblu,
        .skypgrn,
        .andrd,
        .stmblupn,
        .flkrpnk,
        .flkrblu,
        .yaho,
        .sndcld,
        .sptfygrn,
        .sptfydrkgrn,
        .drbl,
        .rdt,
        .pkt,
        .qra,
        .qrablu,
        .sldshrorng,
        .sldshrblu,
        .fvhndrdpx,
        .lstlyorng,
        .lstlyblu,
        .vin,
        .dvntart {
            color: #eee;
            filter: opacity(0.8);
        }
        
        .snpcht {
            color: gray;
            filter: opacity(0.8);
        }
        
        .instaylw {
            color: gray;
            filter: opacity(0.8);
        }
        
        .fb:hover,
        .twtr:hover,
        .yt:hover,
        .instamgnt:hover,
        .instablu:hover,
        .instaprpl:hover,
        .instaorng:hover,
        .pntrst:hover,
        .gglpls:hover,
        .lnkdn:hover,
        .vimeoblu:hover,
        .vimeoorng:hover,
        .vimeogrn:hover,
        .vimeopnk:hover,
        .tmblr:hover,
        .whtsapgrn:hover,
        .whtsaptl1:hover,
        .whtsaptl2:hover,
        .frsqrpnk:hover,
        .frsqrblu:hover,
        .swrm:hover,
        .skypblu:hover,
        .skypgrn:hover,
        .andrd:hover,
        .stmblupn:hover,
        .flkrpnk:hover,
        .flkrblu:hover,
        .yaho:hover,
        .sndcld:hover,
        .sptfygrn:hover,
        .sptfydrkgrn:hover,
        .drbl:hover,
        .rdt:hover,
        .pkt:hover,
        .qra:hover,
        .qrablu:hover,
        .sldshrorng:hover,
        .sldshrblu:hover,
        .fvhndrdpx:hover,
        .lstlyorng:hover,
        .lstlyblu:hover,
        .vin:hover,
        .dvntart:hover {
            color: #fff;
            filter: opacity(1);
        }
        
        .snpcht:hover {
            color: darkgray;
            filter: opacity(1);
        }
        
        .instaylw:hover {
            color: darkgray;
            filter: opacity(1);
        }
        
        .fb:focus,
        .twtr:focus,
        .yt:focus,
        .instamgnt:focus,
        .instablu:focus,
        .instaprpl:focus,
        .instaorng:focus,
        .pntrst:focus,
        .gglpls:focus,
        .lnkdn:focus,
        .vimeoblu:focus,
        .vimeogrn:focus,
        .vimeoorng:focus,
        .vimeopnk:focus,
        .tmblr:focus,
        .whtsapgrn:focus,
        .whtsaptl1:focus,
        .whtsaptl2:focus,
        .frsqrpnk:focus,
        .frsqrblu:focus,
        .swrm:focus,
        .skypblu:focus,
        .skypgrn:focus,
        .andrd:focus,
        .stmblupn:focus,
        .flkrpnk:focus,
        .flkrblu:focus,
        .yaho:focus,
        .sndcld:focus,
        .sptfygrn:focus,
        .sptfydrkgrn:focus,
        .drbl:focus,
        .rdt:focus,
        .pkt:focus,
        .qra:focus,
        .qrablu:focus,
        .sldshrorng:focus,
        .sldshrblu:focus,
        .fvhndrdpx:focus,
        .lstlyorng:focus,
        .lstlyblu:focus,
        .vin:focus,
        .dvntart :focus {
            color: #fff;
            filter: opacity(1);
        }
        
        .instaylw:focus {
            color: darkgray;
            filter: opacity(1);
        }
        .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
}

.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}

.btn-group-justified>.btn,
.btn-group-justified>.btn-group {
    display: table-cell;
    float: none;
    width: 1%;
}

.btn-group-justified>.btn-group .btn {
    width: 100%;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-block+.btn-block {
    margin-top: 5px;
}

.btn-group .btn+.btn,
.btn-group .btn+.btn-group,
.btn-group .btn-group+.btn,
.btn-group .btn-group+.btn-group {
    margin-left: -1px;
}

.btn-group>.btn:first-child {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.btn-group>.btn:last-child {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.fa-15x{font-size:1.5em;}
.btn-group>.btn:not(:first-child):not(:last-child) {
    border-radius: 0px;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

hr {
    height: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: 0;
    border-top: 1px solid #eee;
}
</style>

First Example

<div>
    <div class="btn-group-justified">
        <a href="" class="btn facebook btn-block"><span class="fa fa-facebook fa-15x "></span></a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div class="btn-group btn-group-justified">
        <a href="" class="btn twitter btn-block"><span class="fa fa-twitter fa-15x"></span></a>
        <a href="" class="btn instagram-magenta btn-block"><span class="fa fa-instagram fa-15x"></span></a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div class="btn-group btn-group-justified">
        <a href="" class="btn youtube btn-block"><span class="fa fa-youtube-play fa-15x"></span></a>
        <a href="" class="btn btn-block google-plus"><span class="fa fa-google-plus fa-15x"></span></a>
        <a href="" class="btn linkedin btn-block"><span class="fa fa-linkedin fa-15x"></span></a>
    </div>
</div>

Second Example

<div>
    <div>
        <a href="" class="bnt bnt-block fb"><span class="fa fa-facebook fa-15x"></span></a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block twtr"><span class="fa fa-twitter fa-15x"></span></a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block gglpls"><span class="fa fa-google-plus fa-15x"></span></a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block yt"><span class="fa fa-youtube-play fa-15x"></span></a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block instamgnt"><span class="fa fa-instagram fa-15x"></span></a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block lnkdn"><span class="fa fa-linkedin fa-15x"></span></a>
    </div>
</div>

Third Example

<div>
    <div>
        <a href="" class="bnt bnt-block fb"><span class="fa fa-facebook"></span> Facebook</a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block twtr"><span class="fa fa-twitter"></span> Twitter</a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block gglpls"><span class="fa fa-google-plus"></span> Google +</a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block yt"><span class="fa fa-youtube-play"></span> Youtube</a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block instamgnt"><span class="fa fa-instagram"></span> Instagram</a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block lnkdn"><span class="fa fa-linkedin"></span> Liked In</a>
    </div>
</div>

Fourth Example

<div>
    <div>
        <a href="" class="bnt bnt-block fb"><span class="fa fa-facebook pull-left fa-15x"></span> Facebook <span class="pull-right">2k+</span></a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block twtr"><span class="fa fa-twitter pull-left fa-15x"></span> Twitter<span class="pull-right">2k+</span></a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block gglpls"><span class="fa fa-google-plus pull-left fa-15x"></span> Google +<span class="pull-right">2k+</span></a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block yt"><span class="fa fa-youtube text-left pull-left fa-15x"></span> Youtube<span class="pull-right">2k+</span></a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block instamgnt"><span class="fa fa-instagram pull-left fa-15x"></span> Instagram<span class="pull-right">2k+</span></a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block lnkdn"><span class="fa fa-linkedin pull-left fa-15x"></span> Liked In<span class="pull-right">2k+</span></a>
    </div>
</div>

Fifth Example

<div>
    <div>
        <a href="" class="bnt bnt-block fb"><span class="fa fa-facebook pull-right fa-15x"></span> Facebook</a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block twtr"><span class="fa fa-twitter pull-right fa-15x"></span> Twitter</a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block gglpls"><span class="fa fa-google-plus pull-right fa-15x"></span> Google +</a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block yt"><span class="fa fa-youtube-play text-left pull-right fa-15x"></span> Youtube</a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block instamgnt"><span class="fa fa-instagram pull-right fa-15x"></span> Instagram</a>
    </div>
    <hr style="padding: 0px; margin:0px; margin-top: 3px">
    <div>
        <a href="" class="bnt bnt-block lnkdn"><span class="fa fa-linkedin pull-right fa-15x"></span> Liked In</a>
    </div>
</div>

Read this article to learn how to ad these buttons toyour blogger blog or website

Click to vsit page