ボタン06

$BLOCK_NAME: '.button-06';

// 変数
$transition-border: 0.5s;
$easing-border: cubic-bezier(0.32, 0, 0.21, 1);
$gradient-border: linear-gradient(90deg, #efb8b7, #3298c6, #efb8b7);

#{ $BLOCK_NAME } {
  position: relative;
  padding-bottom: 0.6em;
  font-size: 15px;
  &::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    height: 0.2em;
    content: '';
    background: $gradient-border;
    background-position: left;
    background-size: 200% 100%;
    transition: background-position $transition-border $easing-border;
  }
  &:hover {
    &::after {
      background-position: right;
    }
  }
}