<a class="button-03" href="#"><span class="button-03__text">ボタン03<span class="button-03__arrow"><i class="fas fa-chevron-right"></i></span></span></a>
a.button-03(href=link)
span.button-03__text #{ text }
span.button-03__arrow
i.fas.fa-chevron-right
{
"link": "#",
"text": "ボタン03"
}
$BLOCK_NAME: '.button-03';
// 変数
$color-primary: #e6c9a1;
$transition-text: 0.2s;
$transition-bg: 0.6s;
$easing-bg: cubic-bezier(0.215, 0.61, 0.355, 1);
#{ $BLOCK_NAME } {
position: relative;
padding: 15px 10px;
font-size: 13px;
font-weight: bold;
&::before {
position: absolute;
right: 0;
bottom: 4px;
left: 0;
display: block;
height: 20px;
content: '';
background: $color-primary;
transition: transform $transition-bg $easing-bg;
transform-origin: bottom right;
}
&__text {
position: relative;
padding-right: 40px;
transition: color $transition-text ease-in;
}
&__arrow {
position: absolute;
top: 3px;
right: 0;
bottom: 0;
margin: auto 0;
}
&:hover {
&::before {
transform: scaleX(0);
}
.button-03__text {
color: $color-primary;
}
}
}