<a class="button-14" href="#"><span class="button-14__text">Button14</span><span class="button-14__icon"></span></a>
a.button-14(href=link)
span.button-14__text #{ text }
span.button-14__icon
{
"link": "#",
"text": "Button14"
}
$BLOCK_NAME: '.button-14';
// 変数
$color_primary: #cb000f;
$color_secondary: #111;
$size_icon: 80px;
$transition_default: 0.4s;
$easing_default: cubic-bezier(0.165, 0.84, 0.44, 1);
#{ $BLOCK_NAME } {
position: relative;
display: inline-flex;
align-items: center;
height: $size_icon;
padding-left: 40px;
&__text {
z-index: 1;
display: inline-block;
padding-bottom: 6px;
font-size: 32px;
font-weight: bold;
line-height: 30px;
color: $color_primary;
background: #fff;
transition: all $transition_default $easing_default;
}
&:hover &__text {
color: $color_secondary;
transform: translateX(-8px);
}
&__icon {
position: absolute;
top: 0;
left: 0;
display: block;
width: $size_icon;
height: $size_icon;
border: 3px solid $color_primary;
transition: all $transition_default $easing_default;
}
&:hover &__icon {
border-color: $color_secondary;
transform: scale(0.9);
}
}