Social Icon Buttons

By Rafi

social icons button

How do I use This?

Social icons with a hover effect.

HTML

<a href="#" class="social-icon-button twitter"><i class="fa fa-twitter" aria-hidden="true"></i><span></span></a>

<a href="#" class="social-icon-button facebook"><i class="fa fa-facebook" aria-hidden="true"></i><span></span></a>

<a href="#" class="social-icon-button gplus"><i class="fa fa-google-plus" aria-hidden="true"></i></i><span></span></a>

// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
$social-brand-facebook: #3b5998;
$social-brand-twitter: #55acee;
$social-brand-google-plus: #dd4b39;

$social-icon-button-bg: none;
$social-icon-button-font-size: 2rem;
$social-icon-button-size: 3.6rem;
$social-icon-button-space-between: 0.25rem;
$social-icon-button-transition: all 0.3s ease-in-out;


.social-icon-button {
  border-radius: $social-icon-button-size;
  width: $social-icon-button-size;
  height: $social-icon-button-size;
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: $social-icon-button-font-size;
  background: $social-icon-button-bg;

  + .social-icon-button {
    margin-left: $social-icon-button-space-between;
  }

  .fa {
    background: none;
    @include absolute-center;
    z-index: 1;
    line-height: $social-icon-button-size;
    transition: $social-icon-button-transition;
  }

  span {
    display: block;
    border-radius: 0;
    width: 0;
    height: 0;
    @include absolute-center;
    transition: $social-icon-button-transition;
  }

  &:hover {

    .fa {
      color: $white;
    }

    span {
      display: block;
      border-radius: $social-icon-button-size;
      width: $social-icon-button-size;
      height: $social-icon-button-size;
    }
  }

  &.gplus {
    color: $social-brand-google-plus;

    span{
      background-color: $social-brand-google-plus;
    }
  }

  &.twitter {
    color: $social-brand-twitter;

    span{
      background-color: $social-brand-twitter;
    }
  }

  &.facebook {
    color: $social-brand-facebook;

    span{
      background-color: $social-brand-facebook;
    }
  }
}

.social-icon-button {
  border-radius: 3.6rem;
  width: 3.6rem;
  height: 3.6rem;
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 2rem;
  background: none;
}

.social-icon-button + .social-icon-button {
  margin-left: 0.25rem;
}

.social-icon-button .fa {
  background: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
  line-height: 3.6rem;
  transition: all 0.3s ease-in-out;
}

.social-icon-button span {
  display: block;
  border-radius: 0;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
}

.social-icon-button:hover .fa {
  color: #fefefe;
}

.social-icon-button:hover span {
  display: block;
  border-radius: 3.6rem;
  width: 3.6rem;
  height: 3.6rem;
}

.social-icon-button.gplus {
  color: #dd4b39;
}

.social-icon-button.gplus span {
  background-color: #dd4b39;
}

.social-icon-button.twitter {
  color: #55acee;
}

.social-icon-button.twitter span {
  background-color: #55acee;
}

.social-icon-button.facebook {
  color: #3b5998;
}

.social-icon-button.facebook span {
  background-color: #3b5998;
}

Social Icon Buttons

By Rafi

Like Button

Colored Switches

Simple Content Filter

Social Icon Buttons

By Rafi

Similar Building Blocks

Like Button

Colored Switches

Simple Content Filter