Social Media Icons Hexagon Tutorial

Social Media Icons Hexagon Tutorial

HTML

<div class="socialMediaIcons">
       <a href="#" class="hexa facebook">
         <i class="fa fa-facebook icon"></i
         ><span class="ribbon">Facebook</span>
       </a>
       <a href="#" class="hexa twitter">
         <i class="fa fa-twitter icon"></i><span class="ribbon">Twitter</span>
       </a>

       <a href="#" class="hexa googleplus">
         <i class="fa fa-google-plus icon"></i>
         <span class="ribbon">Google Plus</span>
       </a>
       <a href="#" class="hexa instagram">
         <i class="fa fa-instagram icon"></i>
         <span class="ribbon">Instagram</span>
       </a>
       <a href="#" class="hexa youtube">
         <i class="fa fa-youtube-play icon"></i>
         <span class="ribbon">Youtube</span>
       </a>
       <a href="#" class="hexa pinterest">
         <i class="fa fa-pinterest icon"></i>
         <span class="ribbon">Pinterest</span>
       </a>
       <a href="#" class="hexa linkedin">
         <i class="fa fa-linkedin icon"></i>
         <span class="ribbon">linkedin</span>
       </a>
       <a href="#" class="hexa snapchat">
         <i class="fa fa-snapchat icon"></i>
         <span class="ribbon">Snapchat</span>
       </a>
       <a href="#" class="hexa whatsapp">
         <i class="fa fa-whatsapp icon"></i>
         <span class="ribbon">Whatsapp</span>
       </a>
       <a href="#" class="hexa reddit">
         <i class="fa fa-reddit icon"></i> <span class="ribbon">reddit</span>
       </a>
       <a href="#" class="hexa skype">
         <i class="fa fa-skype icon"></i> <span class="ribbon">Skype</span>
       </a>
     </div>

SCSS

@import url("https://fonts.googleapis.com/css?family=Comfortaa");
$fontFamily: "Comfortaa", cursive;
* {
  box-sizing: border-box;
  font-family: $fontFamily;
}
@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}
$colorList: (
  facebook: #3b5998,
  twitter: #1da1f2,
  googleplus: #db4437,
  youtube: #ff0000,
  instagram: #c32aa3,
  pinterest: #bd081c,
  linkedin: #007bb5,
  snapchat: #fffc00,
  whatsapp: #25d366,
  reddit: #ff4500,
  skype: #00aff0
);


.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin Hexa($height, $width) {
  height: $height;
  width: $width;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: rem(2px);
  z-index: 1;
  text-decoration: none;
  margin: rem(4px) rem(26px);
  position: relative;
  &::after,
  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: 100%;
    background-color: inherit;
    border-radius: inherit;
  }
  &::before {
    transform: rotate(60deg);
  }
  &::after {
    transform: rotate(-60deg);
  }
  .icon {
    display: inline-flex;
    height: $width;
    width: $width;
    justify-content: center;
    align-items: center;
    border-radius: rem(50px);
    z-index: 2;
    font-size: rem(20px);
  }
  .ribbon {
    position: absolute;
    display: inline-flex;
    z-index: 2;
    padding: rem(4px) 0;
    width: rem(100px);
    justify-content: center;
    align-items: center;
    border-radius: rem(4px);
    background-color: #000000;
    font-size: rem(12px);
    text-transform: capitalize;
    bottom: rem(6px);
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
  }
}

.socialMediaIcons{
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.hexa {
  @include Hexa(90px, 52px);
  @each $colorName, $colorValue in $colorList {
    &.#{$colorName} {
      background-color: #{$colorValue};
      &::before {
        background-color: darken($colorValue, 20%);
      }
      &::after {
        background-color: darken($colorValue, 10%);
      }
      .icon {
        color: darken($colorValue, 30%);
        background-color: lighten($colorValue, 30%);
      }
      .ribbon {
        background-color: darken($colorValue, 20%);
        color: lighten($colorValue, 40%);
      }
    }
  }
}

CSS

@import url("https://fonts.googleapis.com/css?family=Comfortaa");
.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.socialMediaIcons {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.hexa {
  height: 90px;
  width: 52px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.125rem;
  z-index: 1;
  text-decoration: none;
  margin: 0.25rem 1.625rem;
  position: relative;
}
.hexa::after, .hexa::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
  background-color: inherit;
  border-radius: inherit;
}
.hexa::before {
  transform: rotate(60deg);
}
.hexa::after {
  transform: rotate(-60deg);
}
.hexa .icon {
  display: inline-flex;
  height: 52px;
  width: 52px;
  justify-content: center;
  align-items: center;
  border-radius: 3.125rem;
  z-index: 2;
  font-size: 1.25rem;
}
.hexa .ribbon {
  position: absolute;
  display: inline-flex;
  z-index: 2;
  padding: 0.25rem 0;
  width: 6.25rem;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  background-color: #000000;
  font-size: 0.75rem;
  text-transform: capitalize;
  bottom: 0.375rem;
  left: 50%;
  transform: translateX(-50%);
  margin: auto;
}
.hexa.facebook {
  background-color: #3b5998;
}
.hexa.facebook::before {
  background-color: #1e2e4f;
}
.hexa.facebook::after {
  background-color: #2d4373;
}
.hexa.facebook .icon {
  color: #10182a;
  background-color: #96abd6;
}
.hexa.facebook .ribbon {
  background-color: #1e2e4f;
  color: #bbc8e4;
}
.hexa.twitter {
  background-color: #1da1f2;
}
.hexa.twitter::before {
  background-color: #0967a0;
}
.hexa.twitter::after {
  background-color: #0c85d0;
}
.hexa.twitter .icon {
  color: #064870;
  background-color: #aeddfa;
}
.hexa.twitter .ribbon {
  background-color: #0967a0;
  color: #def1fd;
}
.hexa.googleplus {
  background-color: #db4437;
}
.hexa.googleplus::before {
  background-color: #92241a;
}
.hexa.googleplus::after {
  background-color: #bd2e22;
}
.hexa.googleplus .icon {
  color: #671912;
  background-color: #f2bdb9;
}
.hexa.googleplus .ribbon {
  background-color: #92241a;
  color: #fae6e4;
}
.hexa.youtube {
  background-color: #ff0000;
}
.hexa.youtube::before {
  background-color: #990000;
}
.hexa.youtube::after {
  background-color: #cc0000;
}
.hexa.youtube .icon {
  color: #660000;
  background-color: #ff9999;
}
.hexa.youtube .ribbon {
  background-color: #990000;
  color: #ffcccc;
}
.hexa.instagram {
  background-color: #c32aa3;
}
.hexa.instagram::before {
  background-color: #6f185d;
}
.hexa.instagram::after {
  background-color: #992180;
}
.hexa.instagram .icon {
  color: #450f3a;
  background-color: #ea9cda;
}
.hexa.instagram .ribbon {
  background-color: #6f185d;
  color: #f3c6e9;
}
.hexa.pinterest {
  background-color: #bd081c;
}
.hexa.pinterest::before {
  background-color: #5b040e;
}
.hexa.pinterest::after {
  background-color: #8c0615;
}
.hexa.pinterest .icon {
  color: #2a0206;
  background-color: #f96576;
}
.hexa.pinterest .ribbon {
  background-color: #5b040e;
  color: #fb96a1;
}
.hexa.linkedin {
  background-color: #007bb5;
}
.hexa.linkedin::before {
  background-color: #00364f;
}
.hexa.linkedin::after {
  background-color: #005882;
}
.hexa.linkedin .icon {
  color: #00131c;
  background-color: #4fc7ff;
}
.hexa.linkedin .ribbon {
  background-color: #00364f;
  color: #82d7ff;
}
.hexa.snapchat {
  background-color: #fffc00;
}
.hexa.snapchat::before {
  background-color: #999700;
}
.hexa.snapchat::after {
  background-color: #ccca00;
}
.hexa.snapchat .icon {
  color: #666500;
  background-color: #fffe99;
}
.hexa.snapchat .ribbon {
  background-color: #999700;
  color: #fffecc;
}
.hexa.whatsapp {
  background-color: #25d366;
}
.hexa.whatsapp::before {
  background-color: #167c3c;
}
.hexa.whatsapp::after {
  background-color: #1da851;
}
.hexa.whatsapp .icon {
  color: #0e5127;
  background-color: #a2efbf;
}
.hexa.whatsapp .ribbon {
  background-color: #167c3c;
  color: #cef6dd;
}
.hexa.reddit {
  background-color: #ff4500;
}
.hexa.reddit::before {
  background-color: #992900;
}
.hexa.reddit::after {
  background-color: #cc3700;
}
.hexa.reddit .icon {
  color: #661c00;
  background-color: #ffb599;
}
.hexa.reddit .ribbon {
  background-color: #992900;
  color: #ffdacc;
}
.hexa.skype {
  background-color: #00aff0;
}
.hexa.skype::before {
  background-color: #00658a;
}
.hexa.skype::after {
  background-color: #008abd;
}
.hexa.skype .icon {
  color: #003f57;
  background-color: #8adfff;
}
.hexa.skype .ribbon {
  background-color: #00658a;
  color: #bdedff;
}

 

Add a Comment

Your email address will not be published. Required fields are marked *