ボタン20

$BLOCK_NAME: '.button-20';

// 変数
$color_primary: #096fc8;
$easing_default: cubic-bezier(0.6, -0.01, 0.1, 1);

#{ $BLOCK_NAME } {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-weight: bold;
  border-radius: 50%;
  transition: color 0.3s $easing_default;
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    border: 2px solid $color_primary;
    border-radius: 50%;
    opacity: 1;
    transition: transform 0.6s $easing_default,
      opacity 0.6s $easing_default 0.2s;
    transform: scale(0);
  }
  &:hover {
    color: $color_primary;
    &::after {
      opacity: 0;
      transform: scale(1);
    }
  }
}