<a class="button-04" href="#"><span class="button-04__text js-button-04-text">Button04</span><span class="button-04__arrow"></span></a>
a.button-04(href=link)
span.button-04__text.js-button-04-text #{ text }
span.button-04__arrow
{
"link": "#",
"text": "Button04"
}
$BLOCK_NAME: '.button-04';
// 変数
$color_primary: #000;
$color_white: #fff;
$transition_default: 0.4s;
$transition_text: 0.5s;
$transition_slide_text: 0.18s;
$delay_slide_text: 0.05s;
$length_slide_text: 8px;
$length_slide_arrow: 8px;
#{ $BLOCK_NAME } {
position: relative;
display: block;
width: 380px;
padding: 35px;
overflow: hidden;
font-family: 'Source Serif Pro', serif;
font-size: 24px;
border-bottom: 1px solid $color_primary;
transition: color $transition_default ease-out;
&::after {
position: absolute;
top: 0;
right: -5%;
left: -5%;
display: block;
height: 420%;
content: '';
background: $color_primary;
transition: transform $transition_default ease-out;
transform: skewY(-30deg) scaleY(0);
transform-origin: left bottom;
}
&__text {
position: relative;
z-index: 1;
display: block;
& > span {
display: inline-block;
}
}
&__arrow {
position: absolute;
top: 0;
right: 25px;
bottom: 0;
z-index: 1;
display: block;
width: 34px;
height: 11px;
margin: auto 0;
transition: transform $transition_default ease-out;
&::before,
&::after {
position: absolute;
display: block;
content: '';
transition: all $transition_default ease-out;
}
&::before {
top: 50%;
right: 0;
left: 0;
height: 1px;
background: $color_primary;
transform: translateY(-50%);
}
&::after {
top: 0;
right: 1px;
bottom: 0;
width: 9px;
height: 9px;
border: 1px solid transparent;
border-top-color: $color_primary;
border-right-color: $color_primary;
transform: rotate(45deg);
}
}
&:hover {
color: $color_white;
&::after {
transform: skewY(-30deg) scaleY(1);
transform-origin: left top;
}
}
&:hover &__text {
transition: transform $transition_text ease-out;
transform: translateY($length_slide_text);
& > span {
transition: transform $transition_text ease;
transform: translateY(-$length_slide_text);
@for $i from 1 through 20 {
&:nth-child(#{$i}) {
transition-delay: #{$i * $delay_slide_text};
}
}
}
}
&:hover &__arrow {
transform: translateX($length_slide_arrow);
&::before {
background: $color_white;
}
&::after {
border-top-color: $color_white;
border-right-color: $color_white;
}
}
}
'use strict';
export function button04() {
splitText('js-button-04-text');
}
/**
* 指定したクラス名要素のテキストを分割してspanタグでくくる
* @param className 要素のクラス名
*/
function splitText(className: string) {
// ボタン要素を指定
const btnElArr = document.getElementsByClassName(className);
// 要素がない場合、処理を止める
if (!btnElArr.length) return;
// 各要素のテキストを分割してspanタグでくくる
[...btnElArr].forEach(el => {
const text = el.textContent;
const newText = getSplitText(text);
el.innerHTML = newText;
});
/**
* テキストを分割してspanタグでくくる
* @param text 分割したいテキスト
* @returns 分割後のテキスト
*/
function getSplitText(text: string) {
let result: string = '';
text.split('').forEach(c => {
result += `<span>${c}</span>`;
});
return result;
}
}