<a class="button-35" href="#"><span class="button-35__arrow"></span><svg class="button-35__circle" viewBox="0 0 38 38">
<path d="M 0,19 A 19,19 0 1,1 38,19 A 19,19 0 1,1 0,19 z"></path>
</svg></a>
a.button-35(href=link)
span.button-35__arrow
svg.button-35__circle(viewBox='0 0 38 38')
path(d='M 0,19 A 19,19 0 1,1 38,19 A 19,19 0 1,1 0,19 z')
{
"link": "#"
}
$BLOCK_NAME: '.button-35';
// 変数
$color_black: #000;
$color_circle: #757575;
#{ $BLOCK_NAME } {
position: relative;
display: block;
width: 40px;
height: 40px;
&__arrow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
height: 1px;
margin: auto;
content: '';
background: $color_black;
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: block;
width: 8px;
height: 8px;
margin: auto;
content: '';
border-top: 1px solid $color_black;
border-right: 1px solid $color_black;
transform: rotate(45deg);
}
}
&__circle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
height: 100%;
overflow: visible;
fill: none;
stroke: $color_circle;
stroke-dasharray: 119.4 119.4;
stroke-dashoffset: 119.4;
stroke-width: 1px;
transition: stroke-dashoffset 0.5s linear;
transform: translateX(50%);
@at-root #{ $BLOCK_NAME }:hover & {
stroke-dashoffset: 0;
}
}
}