<a class="button-32" href="#"><span class="button-32__text">ボタン32</span><svg class="button-32__arrow" width="88" height="88" viewBox="0 0 88 88">
<path class="button-32__arrow-icon" d="M43.29,37.61l-.22.22a.38.38,0,0,0,0,.54l5.6,5.6H36.87a.38.38,0,0,0-.37.37v.32a.38.38,0,0,0,.38.37h11.8l-5.6,5.6a.37.37,0,0,0,0,.53l.22.23a.37.37,0,0,0,.53,0l6.63-6.62a.4.4,0,0,0,0-.54l-6.63-6.62a.38.38,0,0,0-.53,0Z"></path>
<path class="button-32__arrow-circle" d="M44,.5A43.5,43.5,0,0,0,8.93,69.73l.35-.38a42.93,42.93,0,1,1,14.31,12.5l-.35.39A43.51,43.51,0,1,0,44,.5Z"></path>
</svg></a>
a.button-32(href=link)
span.button-32__text #{ text }
svg.button-32__arrow(width='88', height='88', viewBox='0 0 88 88')
path.button-32__arrow-icon(d='M43.29,37.61l-.22.22a.38.38,0,0,0,0,.54l5.6,5.6H36.87a.38.38,0,0,0-.37.37v.32a.38.38,0,0,0,.38.37h11.8l-5.6,5.6a.37.37,0,0,0,0,.53l.22.23a.37.37,0,0,0,.53,0l6.63-6.62a.4.4,0,0,0,0-.54l-6.63-6.62a.38.38,0,0,0-.53,0Z')
path.button-32__arrow-circle(d='M44,.5A43.5,43.5,0,0,0,8.93,69.73l.35-.38a42.93,42.93,0,1,1,14.31,12.5l-.35.39A43.51,43.51,0,1,0,44,.5Z')
{
"link": "#",
"text": "ボタン32"
}
$BLOCK_NAME: '.button-32';
// 変数
$color_primary: #1458e4;
$color_hover: #bbb;
$duration_default: 0.64s;
$easing_default: cubic-bezier(0.165, 0.84, 0.44, 1);
#{ $BLOCK_NAME } {
display: flex;
align-items: center;
font-size: 13px;
color: $color_primary;
transition: all $duration_default $easing_default;
&:hover {
color: $color_hover;
}
&__text {
padding-right: 20px;
}
&__arrow {
width: 100%;
max-width: 76px;
}
&__arrow-icon {
fill: $color_primary;
transition: all $duration_default $easing_default;
@at-root #{ $BLOCK_NAME }:hover & {
fill: $color_hover;
}
}
&__arrow-circle {
fill: none;
stroke: $color_primary;
stroke-miterlimit: 10;
transition: all $duration_default $easing_default;
transform-origin: center center;
@at-root #{ $BLOCK_NAME }:hover & {
stroke: $color_hover;
transform: rotate(270deg);
}
}
}