test

<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>