<a class="contact-01" href="#">
<div class="contact-01__inner">
<h2 class="contact-01__heading">CONTACT</h2>
<p class="contact-01__text">ご依頼・お問い合わせはこちら</p>
<div class="contact-01__arrow"></div>
</div>
</a>
a.contact-01(href=link)
.contact-01__inner
h2.contact-01__heading #{ heading }
p.contact-01__text #{ text }
.contact-01__arrow
{
"link": "#",
"heading": "CONTACT",
"text": "ご依頼・お問い合わせはこちら"
}
$BLOCK_NAME: '.contact-01';
// 変数
$color_primary: #1236e6;
$color_secondary: #082ad0;
$color_white: #fff;
$duration_default: 0.8s;
$duration_arrow: 0.4s;
$easing_default: cubic-bezier(0.65, 0.05, 0.35, 1);
#{ $BLOCK_NAME } {
position: relative;
display: block;
font-family: 'Noto Sans JP', sans-serif;
color: $color_white;
text-align: center;
background: $color_primary;
&:hover {
color: $color_white;
}
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background: $color_secondary;
transition: transform $duration_default $easing_default;
transform: scaleX(0);
transform-origin: right;
}
&:hover::before {
transform: scaleX(1);
transform-origin: left;
}
&__inner {
position: relative;
width: 87.5%;
padding: 135px 0;
margin: 0 auto;
}
&__heading {
position: relative;
z-index: 1;
margin-bottom: 25px;
font-family: 'Barlow', sans-serif;
font-size: 50px;
font-weight: 600;
line-height: 1;
}
&__text {
position: relative;
z-index: 1;
font-size: 17px;
line-height: 1;
letter-spacing: 0.1em;
}
&__arrow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
display: block;
width: 40px;
height: 40px;
margin: auto;
border: 2px solid $color_white;
border-radius: 50%;
&::before {
position: absolute;
top: 0;
right: 50%;
bottom: 0;
left: -50%;
display: block;
height: 2px;
margin: auto;
content: '';
background: $color_white;
transition: transform $duration_arrow $easing_default;
transform: translateX(-10px);
@at-root #{ $BLOCK_NAME }:hover & {
transform: translateX(0);
}
}
}
}