Rounded Social buttons

By Harry Manchanda

F6 Line Created with Sketch.
social mixin button icons transition
How do I use This?

A sweet Sass mixin to create Rounded Social buttons with CSS transition and spin rotation on hover/focus.

HTML
<div class="rounded-social-buttons">
  <a class="social-button facebook" href="#"></a>
  <a class="social-button twitter" href="#"></a>
  <a class="social-button linkedin" href="#"></a>
  <a class="social-button youtube" href="#"></a>
  <a class="social-button instagram" href="#"></a>
  <a class="social-button pinterest" href="#"></a>
  <a class="social-button google-plus" href="#"></a>
  <a class="social-button github" href="#"></a>
  <a class="social-button tumblr" href="#"></a>
</div>


$social-button-size: 3.125rem;
$social-button-border-width: 0.125rem;
$social-button-font-size: 1.5625rem;
$social-button-line-height: 2em;
$social-button-border-radius: 1.6875rem;
$social-button-transition: all 0.5s ease;
$social-button-margin: 0.25rem;

// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
$social-brand-facebook: #3b5998;
$social-brand-twitter: #55acee;
$social-brand-linkedin: #007bb5;
$social-brand-youtube: #bb0000;
$social-brand-instagram: #125688;
$social-brand-pinterest: #cb2027;
$social-brand-google-plus: #dd4b39;
$social-brand-github: #000000;
$social-brand-tumblr: #32506d;

@mixin social-button($brand-color, $brand-icon) {
  background: $brand-color;

  &:before {
    font-family: "FontAwesome";
    content: $brand-icon;
  }
  &:hover,
  &:focus {
    color: $brand-color;
    background: $white;
    border-color: $brand-color;
  }
}

.rounded-social-buttons {
  text-align: center;

  .social-button {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: $social-button-size;
    height: $social-button-size;
    border: $social-button-border-width solid transparent;
    padding: 0;
    text-decoration: none;
    text-align: center;
    color: $white;
    font-size: $social-button-font-size;
    font-weight: normal;
    line-height: $social-button-line-height;
    border-radius: $social-button-border-radius;
    transition: $social-button-transition;
    margin-right: $social-button-margin;
    margin-bottom: $social-button-margin;

    &:hover,
    &:focus {
      transform: rotate(360deg);
    }

    &.facebook {
      @include social-button($social-brand-facebook, "\f09a")
    }

    &.twitter {
      @include social-button($social-brand-twitter, "\f099")
    }

    &.linkedin {
      @include social-button($social-brand-linkedin, "\f0e1")
    }

    &.youtube {
      @include social-button($social-brand-youtube, "\f167")
    }

    &.instagram {
      @include social-button($social-brand-instagram, "\f16d")
    }

    &.pinterest {
      @include social-button($social-brand-pinterest, "\f231")
    }

    &.google-plus {
      @include social-button($social-brand-google-plus, "\f0d5")
    }

    &.github {
      @include social-button($social-brand-github, "\f09b")
    }

    &.tumblr {
      @include social-button($social-brand-tumblr, "\f173")
    }
  }
}


@charset "UTF-8";

.rounded-social-buttons {
  text-align: center;
}

.rounded-social-buttons .social-button {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 3.125rem;
  height: 3.125rem;
  border: 0.125rem solid transparent;
  padding: 0;
  text-decoration: none;
  text-align: center;
  color: #fefefe;
  font-size: 1.5625rem;
  font-weight: normal;
  line-height: 2em;
  border-radius: 1.6875rem;
  transition: all 0.5s ease;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}

.rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

.rounded-social-buttons .social-button.facebook {
  background: #3b5998;
}

.rounded-social-buttons .social-button.facebook:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {
  color: #3b5998;
  background: #fefefe;
  border-color: #3b5998;
}

.rounded-social-buttons .social-button.twitter {
  background: #55acee;
}

.rounded-social-buttons .social-button.twitter:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {
  color: #55acee;
  background: #fefefe;
  border-color: #55acee;
}

.rounded-social-buttons .social-button.linkedin {
  background: #007bb5;
}

.rounded-social-buttons .social-button.linkedin:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {
  color: #007bb5;
  background: #fefefe;
  border-color: #007bb5;
}

.rounded-social-buttons .social-button.youtube {
  background: #bb0000;
}

.rounded-social-buttons .social-button.youtube:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.youtube:hover, .rounded-social-buttons .social-button.youtube:focus {
  color: #bb0000;
  background: #fefefe;
  border-color: #bb0000;
}

.rounded-social-buttons .social-button.instagram {
  background: #125688;
}

.rounded-social-buttons .social-button.instagram:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.instagram:hover, .rounded-social-buttons .social-button.instagram:focus {
  color: #125688;
  background: #fefefe;
  border-color: #125688;
}

.rounded-social-buttons .social-button.pinterest {
  background: #cb2027;
}

.rounded-social-buttons .social-button.pinterest:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.pinterest:hover, .rounded-social-buttons .social-button.pinterest:focus {
  color: #cb2027;
  background: #fefefe;
  border-color: #cb2027;
}

.rounded-social-buttons .social-button.google-plus {
  background: #dd4b39;
}

.rounded-social-buttons .social-button.google-plus:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.google-plus:hover, .rounded-social-buttons .social-button.google-plus:focus {
  color: #dd4b39;
  background: #fefefe;
  border-color: #dd4b39;
}

.rounded-social-buttons .social-button.github {
  background: #000000;
}

.rounded-social-buttons .social-button.github:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.github:hover, .rounded-social-buttons .social-button.github:focus {
  color: #000000;
  background: #fefefe;
  border-color: #000000;
}

.rounded-social-buttons .social-button.tumblr {
  background: #32506d;
}

.rounded-social-buttons .social-button.tumblr:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.tumblr:hover, .rounded-social-buttons .social-button.tumblr:focus {
  color: #32506d;
  background: #fefefe;
  border-color: #32506d;
}
JS

Similar Building Blocks

control

Tabbed search bar

F6
by Kevin
Page 1 Created with Sketch.
control

Like Button

F6
by Christine Siu
Page 1 Created with Sketch.
control

Mobile App Dashboard

F6
by Rafi
Page 1 Created with Sketch.