ボタン08

$BLOCK_NAME: '.button-08';

// 変数
$color_primary: #0bcdf7;
$color_secondary: #e3ff00;
$width_border: 6px;
$transition_arrow: 0.5s;
$transition_border: 0.75s;
$easing_default: cubic-bezier(0.22, 0.61, 0.36, 1);

#{ $BLOCK_NAME } {
  position: relative;
  display: block;
  width: 130px;
  height: 130px;
  background: $color_primary;
  border-radius: 50%;
  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 10px;
    display: block;
    width: 0;
    height: 0;
    margin: auto;
    content: '';
    border: solid transparent;
    border-width: 23px 0 23px 32px;
    border-left-color: $color_secondary;
    transition: transform $transition_arrow $easing_default;
  }
  &::after {
    position: absolute;
    top: -$width_border;
    right: -$width_border;
    bottom: -$width_border;
    left: -$width_border;
    content: '';
    border: $width_border solid $color_secondary;
    border-radius: 50%;
    opacity: 0;
    transition: $transition_border $easing_default;
    transform: scale(1.1);
  }
  &__wrapper {
    padding: $width_border;
  }
  &:hover {
    &::before {
      transform: scale(1.2);
    }
    &::after {
      opacity: 1;
      transform: scale(1);
    }
  }
}