文字アップダウンボタン

中級者向けのボタンホバーアニメーション。
ボタンをホバーすると一文字ずつ下から英字に変わるリッチなアニメーション。
UIのために日本語ボタン表記が必要だけど、デザイン性も担保したいという時におススメのボタン。

HTML

<a href="#" class="ugkBtnTupdown">
  <span class="ugkBtnTupdown__text">
    <span class="ugkBtnTupdown__main">資料請求はこちら</span>
    <span class="ugkBtnTupdown__sub">Information</span>
  </span>
  <span class="ugkBtnTupdown__arrow">→</span>
</a>

CSS

.ugkBtnTupdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 200px;
　max-width: 100%;
  height: 60px;
  padding: 0 20px;
  color: #000000;
  border: solid 2px #000000;
  border-radius: 100px;
  font-weight: bold;
  transition: all ease .3s;
}
.ugkBtnTupdown__text {
  overflow: hidden;
  height: 1.5em;
  line-height: 1.5em;
  display: flex;
  flex-direction: column;
}
.ugkBtnTupdown__sub {
  color: #fff;
}
.ugkBtnTupdown__arrow {
  transition: all ease .3s;
}
.ugkBtnTupdown__main span, .ugkBtnTupdown__sub span {
  display: inline-block;
  transform: translateY(0);
  transition: all ease .3s;
}
.ugkBtnTupdown:hover {
  background-color: #000000;
}
.ugkBtnTupdown:hover .ugkBtnTupdown__main span,
.ugkBtnTupdown:hover .ugkBtnTupdown__sub span {
  transform: translateY(-100%);
}
.ugkBtnTupdown:hover .ugkBtnTupdown__arrow {
  color: #fff;
}

JS

document.addEventListener('DOMContentLoaded',() =>{
	const targets = document.querySelectorAll('.ugkBtnTupdown__main, .ugkBtnTupdown__sub');
	targets.forEach((el) => {
		const text = (el.textContent || '').trim();//文字列を取り出す
		const chars = Array.from(text);//各文字ごとに分割
		el.textContent = "";
		chars.forEach((ch,i) => {
			const span = document.createElement('span');
			span.textContent = ch;
			
			const delay = 0.03 * (i + 1);
			span.style.transitionDelay = `${delay}s`;
			span.style.webkitTransitionDelay = `${delay}s`;
			
			el.appendChild(span);
		});
	});
});

実際の動き

資料請求はこちら Information →

みんなにもシェアしてあげて！

この記事を書いた人

IYO

WEBサイトで使える“動くUI”を、コピペで実装可能にし、どこでも誰でも使えるコードに特化して発信しているフロントエンドエンジニア。
中学生で初めてコードに出会い初めてコーディングを知る。
その後、WEB制作会社のフロントエンドエンジニアとしてキャリアをスタートし、フリーランスを経て、現在はWEB制作会社の代表取締役。
コーディングによって人生を創り上げてきたからこそ、コードを通して誰かの役に立てたらという想いで、これまでの知識と経験を総動員したコードを公開中。