CSS Web Buttons Social Properties

Netbax Online Editor Try it Yourself

<div style="padding-bottom:4em"></div>
  <button type="button" class="button facebook"><i class="fa fa-facebook"></i> Facebook</button>
<button type="button" class="button youtube"><i class="fa fa-youtube"></i> Youtube</button>
<button type="button" class="button twitter"><i class="fa fa-twitter"></i> Twitter</button><br><br><br>
<button type="button" class="button google"><i class="fa fa-google-plus"></i> Google</button>
<button type="button" class="button linkedin"><i class="fa fa-linkedin"></i> Linkedin</button>
<button type="button" class="button pinterest"><i class="fa fa-pinterest"></i> Pinterest</button>

.twitter {
  background: #2caae1;
  color: #ffffff; }
  .twi:hover, .twi:focus {
    background: #1b8dbf;
    color: #ffffff; }
  
.facebook {
  background: #3b579d;
  color: #ffffff; }
  .face:hover, .face:focus {
    background: #2d4278;
    color: #ffffff; }

.youtube {
  background: #e52d27;
  color: #ffffff; }
  .you:hover, .you:focus {
    background: #c21d17;
    color: #ffffff; }

.google {
  background: #dc4a38;
  color: #ffffff; }
  .google:hover, .google:focus {
    background: #bf3322;
    color: #ffffff; }
 
.linkedin {
  background: #0177b5;
  color: #ffffff; }
  .linkedin:hover, .linkedin:focus {
    background: #015682;
    color: #ffffff; }

.pinterest {
  background: #cc2127;
  color: #ffffff; }
  .pinterest:hover, .pinterest:focus {
    background: #a01a1f;
    color: #ffffff; }

</style>