【ボタン集】ホバーしたら矢印が動くボタン

2024年12月6日

ボタンをホバーしたら矢印を動かしたいなぁ

というわけで今回はホバーしたら矢印が動くボタンをご紹介します。
ただ動くだけではなく、今回は下からボタンが出てくる実装をしてみます。

ホバーしたら矢印が動くボタン

ではまず完成品を見てみましょう。

See the Pen CSSボタン集　ホバーしたら矢印が動くボタン by そす (@Sosgoyo) on CodePen.

今回やりたいホバーアクションは、

・最初に見えている矢印を右斜め上に動かして円外へ
・白い円を少しだけ大きくする
・左下から右上に矢印を動かして円内へ

こんな感じです！他に足すとしたらボタンの背景色を変えるとか、矢印の色を変えるとかでしょうか。

HTML・CSS

ではまずはHTML・CSSを見ていきましょう。

【HTML】

<div class="container">
  <a href="" class="btn">ボタン<span class="btn-circle"></span></a>
</div>

今回は、ボタンの中に白い円を作成していますので
spanタグで白円を実装しております。クラス名は「.btn-circle」としております。

【CSS】

.container {
  margin-top: 50px;
  margin-left: 50px;
}

a {
  text-decoration: none;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 200px;
  border-radius: 40px;
  background-color: red;
  color: white;
  padding-top: 16px;
  padding-bottom: 16px;
  font-weight: bold;
  font-size: 20px;

.btn-circle {
  display: inline-block;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: white;
  overflow: hidden;
  --hover-x: -50%;
　--hover-y: -50%;
　--hover-x1: -200%;
　--hover-y1: 100%;
}
  
  .btn-circle::before {
    content: "→";
    position: absolute;
    z-index: 3;
    font-size: 20px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    color: red;
    transform: translate(var(--hover-x), var(--hover-y)) rotate(-45deg);
}
  
  .btn-circle::after {
    content: "→";
    position: absolute;
    z-index: 3;
    font-size: 20px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    color: red;
    transform: translate(var(--hover-x1), var(--hover-y1)) rotate(-45deg);
}
  
  .btn-circle.is-active {
    --hover-x: -100%;
　　--hover-y: -100%;
}

CSSは少し工夫があります。主に「.btn-circle」のクラスになります。
少し抜粋しながら説明いたします。

カスタムプロパティ

.btn-circle {
  display: inline-block;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: white;
  overflow: hidden;
  --hover-x: -50%;
　--hover-y: -50%;
　--hover-x1: -200%;
　--hover-y1: 100%;
}

ポイントとなるのは、「overflow: hidden;」と、カスタムプロパティです。

カスタムプロパティに関しては以前紹介したことがあるのでそちらの記事をご覧ください↓

【JavaScript】スクロールアニメーションを実装する

簡単にカスタムプロパティを説明すると、疑似要素はJavaScriptで操作できないので
疑似要素を間接的に操作できるようにする、という感じです。

今回の場合は、「.btn-circle::before」「.btn-circle::after」それぞれに使用しております。
どう使用しているか見てみましょう。

.btn-circle::before｛　transform: translate(var(–hover-x), var(–hover-y)) rotate(-45deg);｝
　⇒｛　transform: translate(-50％, -50％) rotate(-45deg);｝

.btn-circle::after　｛　transform: translate(var(–hover-x1), var(–hover-y1)) rotate(-45deg);｝
　⇒｛　transform: translate(-200％, 100％) rotate(-45deg);｝

カスタムプロパティをあてはめるとどうなるかを上記に記載しました。
このそれぞれのカスタムプロパティの数値を変更することで、矢印の位置を動かす形です。

では続いてJavaScriptを見ていきましょう。
今回はGSAPでアニメーションを実装しております。

JavaScript（GSAP）

【JavaScript】

const btn = document.querySelector('.btn');
const arrow = btn.querySelector('.btn-circle');

btn.addEventListener('mouseover', function () {
　// ホバーしたボタンに対応する矢印だけをアニメーションさせる
　gsap.to(arrow, { scale: 1.1, duration: 0.3 });
　gsap.to(arrow, { '--hover-x': '100%', '--hover-y': '-200%', duration: 0.3 });
　gsap.to(arrow, { '--hover-x1': '-50%', '--hover-y1': '-50%', duration: 0.3 });
			
 btn.addEventListener('mouseout', function () {
　// ホバーが外れたときも同様に対応する矢印だけをアニメーションさせる
　gsap.to(arrow, { scale: 1, duration: 0.3 });
　gsap.to(arrow, { '--hover-x': '-50%', '--hover-y': '-50%', duration: 0.3 });
　gsap.to(arrow, { '--hover-x1': '-200%', '--hover-y1': '100%', duration: 0.3 });
　});

});

GSAPの基本アニメーション説明は下記の記事をご参照ください↓

【JavaScript】GSAPを使って簡単なアニメーションを実装する

行っているアニメーションはとても簡単なものです。
今回はカスタムプロパティを使用しておりますので、「–hover-x」「–hover-y」「–hover-x1」「–hover-y1」の値を
変更するように指定しております。

白円は「scale:1.1;」にすることで、ホバー時に少し大きくしております。

では、最後にもう一度完成品を添付しておきます。

See the Pen CSSボタン集　ホバーしたら矢印が動くボタン by そす (@Sosgoyo) on CodePen.