<div class="buttonHeading">
  <h3> Twitter Bootstrap Ghost Social Buttons </h3>
  <h4> For Developers & Designers</h4>
  <p> Hi, these ghost buttons have a border property of none when you hover over them. Adding to their ghostiness! </p>
</div>

<div class="buttonContainer">
<a class="btn btn-default" type= "button" href="#"><i class="fa fa-jsfiddle"> </i> </a>  
    <a class="btn btn-default" type= "button" href="#"> <i class="fa fa-code"></i> </a> 
   <a class="btn btn-default" type= "button" href="#"><i class="fa fa-twitter"></i> </a>
    <a class="btn btn-default" type= "button" href="#"> <i class="fa fa-slack"></i> </a>
  <a class="btn btn-default" type= "button" href="#"> <i class="fa fa-github-alt"></i> </a>
   <a class="btn btn-default" type= "button" href="#"><i class="fa fa-stack-overflow "></i> </a>
    <a class="btn btn-default" type= "button" href="#"><i class="fa fa-dropbox"></i></a>
    <a class="btn btn-default" type= "button" href="#"> <i class="fa fa-dribbble"> </i> </a>
    <a class="btn btn-default" type= "button" href="#"><i class="fa fa-codepen"></i> </a>
</div>

@import url(https://fonts.googleapis.com/css?family=Poiret+One);

.buttonHeading,
.buttonContainer 
{
  text-align:center;
  font-family: 'Poiret One', cursive;
}
h4{
 color:#3eb991;
  font-weight:bold;
 
}
p{ font-size: 15px;}
.btn {
  height: 30px;
  width:30px;
  -moz-border-radius: 50px; 
  webkit-border-radius: 50px; 
  border-radius: 50px;
  margin: 3px;

}
.fa{
  background-color: ;
  margin-left: -4px;  
}

.fa.fa-twitter{ 
  color:#00aced;
}
.fa.fa-dribbble{ 
  color: #ea4c89;
}
.fa.fa-dropbox{
  color:#007ee5;
}
.fa.fa-code{ color: #db4437;}
.fa.fa-slack{ color:#3eb991;}
.fa.fa-stack-overflow{color:#fe7a15;}
.fa.fa-github-alt{ color:#999999;}
.fa.fa-jsfiddle{ color:#5ba4e5;margin-left:-3.5px;
}
.btn:hover{
   border: none;
  background-color: #FFFFFF;
}