<div class="social-buttons">
  <a href="#" class="social-button social-button--facebook" aria-label="Facebook">
    <i class="fab fa-facebook-f"></i>
  </a>
  <a href="#" class="social-button social-button--linkedin" aria-label="LinkedIn">
    <i class="fab fa-linkedin-in"></i>
  </a>
  <a href="#" class="social-button social-button--snapchat" aria-label="Snapchat">
    <i class="fab fa-snapchat-ghost"></i>
  </a>
  <a href="#" class="social-button social-button--github" aria-label="GitHub">
    <i class="fab fa-github"></i>
  </a>
  <a href="#" class="social-button social-button--codepen" aria-label="CodePen">
    <i class="fab fa-codepen"></i>
  </a>
</div>

body {
  background-color: #ddd;
  padding: 80px 16px 16px 16px;
}

.social-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

$social-button-size: 64px;
$social-button-icon-size: 0.4;
$social-button-background: #fff;
$social-button-active-color: #fff;
$social-button-transition-time: 0.3s;

$social-button-colors: (
  'mail': #0072c6,
  'facebook': #3b5999,
  'linkedin': #0077b5,
  'github': #6e5494,
  'codepen': #212121,
  'steam': #7da10e,
  'snapchat': #eec900,
  'twitter': #55acee,
  'instagram': #e4405f,
  'npmjs': #c12127,
);

.social-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  width: $social-button-size;
  height: $social-button-size;
  text-decoration: none;
  border-radius: 100%;
  background: $social-button-background;
  text-align: center;

  &::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    border-radius: 100%;
    transition: $social-button-transition-time;
  }

  &:focus,
  &:hover {
    color: $social-button-active-color;

    &::after {
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      margin-left: calc(-50% - 1px);
    }
  }

  i,
  svg {
    position: relative;
    z-index: 1;
    transition: $social-button-transition-time;
  }

  i {
    font-size: $social-button-size * $social-button-icon-size;
  }

  svg {
    height: percentage($social-button-icon-size);
    width: percentage($social-button-icon-size);
  }

  @each $name, $color in $social-button-colors {
    &--#{$name} {
      color: $color;

      &::after {
        background: $color;
      }
    }
  }
}