Yellow Social Bar

by Timar

HTML

<!DOCTYPE html>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>


</style>

<body>
  <div class="element">
    <div class="square">
      <div class="font-awesome" >
      <a href="https://www.facebook.com/growwisr" target="_blank">
      <span class="fa fa-facebook" aria-hidden="true"></span></a>
      <span class="fa fa-twitter" aria-hidden="true"></span>
      <span class="fa fa-pinterest" aria-hidden="true"></span>
      <span class="fa fa-instagram" aria-hidden="true"></span>
      <span class="fa fa-xing" aria-hidden="true"></span>
      <span class="fa fa-linkedin" aria-hidden="true"></span>
    </div>
   </div>
  </div>
</body>

CSS

body, html {
  height: 100%;
  background: rgb(48,94,105);
  text-align:center;
}
.element {
  position: relative;
  top: 50%;
  left: 40%;
}

.square {
  background-color: rgb(245, 245, 245);
  width: 350px;
  height: 52px;
  border-radius: 10px;
  box-shadow: 
  /* 3D Darker */
  0px -1px 0px 0px rgba(0, 0, 0, 0.08),
  0px -2px 0px 0px rgba(0, 0, 0, 0.04),
    0px -3px 0px 0px rgba(0, 0, 0, 0.04),
    0px -4px 0px 0px rgba(0, 0, 0, 0.04),
  0px -5px 0px 0px rgba(0, 0, 0, 0.1),
  0px -5px 0px 0px rgba(0, 0, 0, 0.0),
  /* 3D Regular Green */
  inset 0px 4px 16px 0px rgba(0, 0, 0, 0.2),
  0px -5px 0px 0px rgba(240, 240, 240, 1),
  inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05),
	/* roundness dark/bright */


 	/* highlight */
  inset 0px -3px 14px 0px rgba(0, 0, 0, 0.1),
  inset 0px -26px 18px 0px rgba(255, 255, 255, 0.0),
  /* floorshadow */
  8px 13px 40px 0px rgba(0, 0, 0, 0.0);
}

.font-awesome {
  background: transparent;
    text-shadow: 0.4px 0.4px 0px rgba(205, 205, 205, 1),
    1px 1.5px 1px rgba(0, 0, 0, 0.3);
    font-size: 25px;
    line-height: 52px;
    letter-spacing: 5px;
    color:white;
    width: 80%;
    height: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}