ボタン24

$BLOCK_NAME: '.button-24';

// 変数
$color_primary: #1f3134;
$duration_default: 0.3s;
$easing_default: cubic-bezier(0.08, 0.92, 0.35, 1);

#{ $BLOCK_NAME } {
  position: relative;
  display: inline-block;
  padding: 32px 8px 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  &::before,
  &::after {
    position: absolute;
    right: 0;
    left: 0;
    display: block;
    margin: auto;
    content: '';
    border-radius: 50%;
    transition: all $duration_default $easing_default;
  }
  &::before {
    top: 6px;
    width: 10px;
    height: 10px;
    border: 1px solid $color_primary;
    opacity: 0;
    transform: scale(0.7);
  }
  &::after {
    top: 9px;
    z-index: 1;
    width: 4px;
    height: 4px;
    background: $color_primary;
  }
  &:hover {
    &::before {
      opacity: 1;
      transform: scale(1.1);
    }
    &::after {
      transform: scale(0.8);
    }
  }
}