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: white;
  text-align:center;
}
.element {
  position: relative;
  top: 50%;
  left: 40%;
}

.square {
  background-color: rgb(242, 171, 47);
  width: 350px;
  height: 52px;
  border-radius: 10px;
  box-shadow: 
  /* 3D Darker */
  0px 5px 3px 0px rgba(0, 0, 0, 0.1),
  0px 5px 0px 0px rgba(0, 0, 0, 0.2),
  /* 3D Regular Green */
  0px 5px 0px 0px rgba(242, 171, 47, 1),
	/* roundness dark/bright */
  inset 0px -30px 26px 0px rgba(0, 0, 0, 0.07),
  inset 0px 26px 18px 0px rgba(255, 255, 255, 0.09),
 	/* highlight */
  inset 0px -1px 1px 0px rgba(255, 255, 255, 0.15),
  /* floorshadow */
  8px 13px 40px 0px rgba(0, 0, 0, 0.40);
}

.font-awesome {
    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;
}