Social media link page

<a href="#">

<div class="fb-icon-bg"></div>

    <div class="fb-bg"></div></a>

  <a href="#">

  <div class="twi-icon-bg"></div>

    <div class="twi-bg"></div></a>

  <a href="#">

  <div class="g-icon-bg"></div>

    <div class="g-bg"></div>

  </a>

<a href="linkedin-url">

  <div class="lin-icon-bg"></div>

    <div class="lin-bg"></div>

  </a>

<a href="instagram-url">

  <div class="ins-icon-bg"></div>

    <div class="ins-bg"></div>

  </a>

<style>

.fb-bg:hover, .twi-bg:hover, .g-bg:hover, .ins-bg:hover, .lin-bg:hover {background:#303030;}

.fb-icon-bg {

background: #354f88;

height: 37px;

margin: 0 0 -37px 0;

width: 41px; 

}

.fb-icon-bg:after {

 content: "\f09a"; font-family: FontAwesome;

  display: block;

  padding: 9px 10px 5px 15px;

color:#fff;

}

.fb-bg {

background: #3b5998;

display: block;

height: 37px;

margin: 0 0 10px 41px;

}

.fb-bg:after {

color: #fff;

content: "Facebook";

height: 37px;

left: 8%;

position: relative;

top: 22%;

width: 41px; 

}

.fb-bg:hover{

  cursor: pointer;

}

.fb-bg:active{

  background: #354f88;

}

/* Twitter */

.twi-icon-bg:after {

 content: "\f099"; font-family: FontAwesome;

  display: block;

  padding: 11px 10px 6px 11px;

color:#fff;

}

.twi-icon-bg {

background: #40a2d1;

height: 37px;

margin: 0 0 -37px 0;

width: 41px; 

}

.twi-bg {

background: #45b0e3;

height: 37px;

margin: 0 0 10px 41px;

}

 

.twi-bg:after {

color: #fff;

content: "Twitter";

height: 37px;

  left: 11%;

position: relative;

top: 22%;

  width: 41px; 

}

.twi-bg:hover {

  cursor: pointer;

}

.twi-bg:active {

  background: #40a2d1;

}

/* Google+ */

.g-icon-bg:after {

 content: "\f0d5"; font-family: FontAwesome;

  display: block;

  padding: 11px 10px 6px 13px;

color:#fff;

}

.g-icon-bg {

background: #ce3e26;

height: 37px;

margin: 0 0 -37px 0;

width: 41px; 

}

 

.g-bg {

background: #de4c34;

height: 37px;

    margin: 0 0 10px 41px;

}

 

.g-bg:after {

color: #fff;

content: "Google+";

height: 37px;

left: 10%;

position: relative;

top: 22%;

width: 41px; 

}

.g-bg:hover {

  cursor: pointer;

}

.lin-icon-bg {

    background: #075e8c;

    height: 37px;

    margin: 0 0 -37px 0;

    width: 41px;

}

.lin-icon-bg:after {

    content: "\f0e1";

    font-family: FontAwesome;

    display: block;

    padding: 11px 10px 6px 13px;

    color: #fff;

}

.lin-bg {

    background: #0077B5;

    height: 37px;

    margin: 0 0 10px 41px;

}

.lin-bg:after {

    color: #fff;

    content: "Follow up on Linkedin";

    height: 37px;

    left: 10%;

    position: relative;

    top: 22%;

    width: 41px;

}

.ins-icon-bg {

    background: #ffc238;

    height: 37px;

    margin: 0 0 -37px 0;

    width: 41px;

}

.ins-icon-bg:after {

    content: "\f16d";

    font-family: FontAwesome;

    display: block;

    padding: 11px 10px 6px 13px;

    color: #fff;

}

.ins-bg {

    background: #ffd438;

    height: 37px;

    margin-left: 41px;

}

.ins-bg:after {

    color: #fff;

    content: "Follow us on Instagram";

    height: 37px;

    left: 10%;

    position: relative;

    top: 22%;

    width: 41px;

}

</style>