【CSSのみ】ホバーするとハートがふわっと浮かび上がるボタンを実装する方法

CSSで手軽にアニメーションを設定できるようになった今、Webサイト上には様々なアニメーションが見られますね。

中でもWebページ上のボタンには、アニメーションが設定されていることが多いです。

今回の記事では、ホバーするとハートがふわっと浮かび上がるボタンの実装方法を紹介します!

CSSのみで実装していきますので、是非試してみてください。

目次

ホバーするとハートが浮かび上がるボタンの完成形

今回実装するボタンはこちらです。

PCでページをご覧の方は、ホバーすることでハートが浮かび上がる様になっていますね。

しかし、スマホやiPadなどの端末ではホバーできません。なので横幅768px以下のデバイスでは、ホバーしなくてもハートのアニメーションが見えるようにしています。

それでは、実際に作り方を見ていきましょう!

ホバーするとハートが浮かび上がるボタンの制作手順

HTML、CSS、ハートの画像を使用して作っていきます。

  1. HTMLで型をつくる
  2. ハートの画像を用意する
  3. CSSでボタンを装飾する

という順番で制作していきますね。

手順1.HTMLでハートのボタンの型をつくる

<a class="heart-button">BUTTON</a>

HTMLはこれだけです。

ボタンのHTML要素を作成して、好きなテキストを入れてください。

リンクを設定したいならaタグを、フォームの送信ボタンなどを実装するならbuttonタグをお使いください。

ここではheart-buttonというクラスを付けていますが、クラス名はなんでも構いません。

手順2.ハートの画像を用意する

今回の実装では、ハートの部分は画像を使用します。

ハートの画像はこちらをクリックしてダウンロードしてください。

heart.svgheart-reverse.svgの2つを用意しています。

自分で画像を用意したい方は、Iconfinderなどのサイトからお気に入りの画像をダウンロードするのがいいですね。

画像の形式は、pngsvgを使用してください。

画像が用意できたら、CSSで設定していきます。

手順3.CSSでハートのボタンの見た目を整える

/* ボタン本体のスタイル */
.heart-button {
  /* ボタン要素の大きさや色 */
  position: relative;
  display: inline-block;
  background-color: #ef4b53;
  padding: 0.8em 2.4em;
  border-radius: 5px;
  border: 2px solid transparent;

  /* ボタンの文字の設定 */
  font-family: 'Quicksand', sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.1em;

  /* その他必要なスタイル */
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

/* ハートの共通スタイル */
.heart-button::before,
.heart-button::after {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  position: absolute;
  opacity: 0;
}

/* 左上のハートのスタイル */
.heart-button::before {
  background-image: url('heart.svg');
  top: 0;
  left: -12px;
}

/* 右下のハートのスタイル */
.heart-button::after {
  background-image: url('heart-reverse.svg');
  bottom: -6px;
  right: -14px;
}

/* ========= ホバー時のスタイル ======== */

/* ボタンホバー時のスタイル */
.heart-button:hover {
  background-color: #fff;
  border-color: #ef4b53;
  color: #ef4b53;
}

/* ボタンホバー時の左上のハートのスタイル */
.heart-button:hover::before {
  animation: heart 1.5s infinite ease-out;
}

/* ボタンホバー時の右下のハートのスタイル */
.heart-button:hover::after {
  animation: heart 1.5s 0.2s infinite ease-out;
}

/* ========= アニメーションの設定 ======== */
@keyframes heart {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) scale(1.4);
    opacity: 0;
  }
}

/* ========= SPのスタイル ======== */
@media screen and (max-width: 768px) {

  /* ボタン本体のスタイル */
  .heart-button {
    background-color: #fff;
    border-color: #ef4b53;
    color: #ef4b53;
  }
  
  /* 左上のハートのスタイル */
  .heart-button::before {
    animation: heart 1.5s infinite ease-out;
  }

  /* 右下のハートのスタイル */
  .heart-button::after {
    animation: heart 1.5s 0.2s infinite ease-out;
  }
}

CSSの全体像はこちらです。

コピペすればすぐに使えるようになってますので、そのまま使いたいという方はぜひ使ってください!

ここからは、

  • コードをカスタマイズをしたい
  • 自分でもコードの内容を理解したい

という方に向けて解説していきますので、興味がある方のみでOKです。

CSSのコードは以下の4つに分かれるので、

  • ボタンの通常時のスタイル
  • ボタンをホバーしたときのスタイル
  • アニメーションの設定
  • レスポンシブ対応

それぞれ解説していきます。

【下準備】ハートボタンの通常時のスタイルを設定する

まずは、ホバーする前段階のボタンの見た目を作っていきましょう。

.heart-button {
  /* ボタン要素の大きさや色 */
  position: relative;
  display: inline-block;
  background-color: #ef4b53; /* ボタンの背景色 */
  padding: 0.8em 2.4em; /* ボタンの余白 */
  border-radius: 5px; /* 角に丸みをつける */
  border: 2px solid transparent; /* ホバー時のために透明のボーダーを設定しておく */

  /* ボタンの文字の設定 */
  font-family: 'Quicksand', sans-serif; /* ボタンのフォント指定 */
  font-weight: bold; /* 文字の太さ */
  font-size: 20px; /* 文字の大きさ */
  color: #fff; /* 文字色 */
  letter-spacing: 0.1em; /* 文字の間隔をあける */

  /* その他必要なスタイル */
  transition: all 0.3s ease; /* ホバー時の色の変化のスピードを調整 */
  cursor: pointer; /* ホバーした時にポインターを表示 */
  text-decoration: none; /* aタグを使用する場合は下線が引かれるので、非表示に */
}

まずはボタンの大きさや色、形を設定します。

これらのプロパティは自由にカスタマイズ可能なので、好きな色や余白を設定してください。

border: 2px solid transparentで透明の線を設定していますが、これはホバー時に色を付けるための下準備です。

初期状態では見えませんが、ここでボーダーの太さ分のスペースを確保しておくことで、ホバーして色がついたときも高さが変わらずページがガタつくのを防げます。

次にボタン内のテキストのスタイルを設定します。

ここではQuicksandというフォントを使用していますが、もし同じフォントを使いたい場合はGoogle Fontsから読み込む必要があります。

その他文字サイズや色に関しては、好きなようにカスタマイズしてください。

これでボタン本体の初期設定は完了です。

次に、ホバーする前のハートの初期設定を行います。

/* ハートの共通スタイル */
.heart-button::before,
.heart-button::after {
  content: "";
  background-size: contain; /* 画像の比率を保ったまま縦横幅に収める */
  background-repeat: no-repeat; /* 画像の繰り返しを無効 */
  width: 20px; /* ハートの横幅 */
  height: 20px; /* ハートの縦幅 */
  position: absolute;
  opacity: 0; /* 初期状態では透明に */
}

/* 左上のハートのスタイル */
.heart-button::before {
  background-image: url('heart.svg'); /* 画像へのパス */
  top: 0;
  left: -12px;
}

/* 右下のハートのスタイル */
.heart-button::after {
  background-image: url('heart-reverse.svg'); /* 画像へのパス */
  bottom: -6px;
  right: -14px;
}

もう一度完成形を確認してみると、左上と右下との2箇所にハートが表示されているのが分かるかと思います。

これら2種類のハートは、擬似要素の::before::afterで実装しています。

最初に2種類のハートの共通スタイルを設定した後、個別に画像の読み込みと位置調整を行っています。

ハートの大きさを変えたい場合は、widthheightの値を調整してください。

またbackground-image: url('')の中身は、自身のプロジェクトに合わせて正しいパスを設定してくださいね。

ハートボタンをホバーした時のスタイルを設定する

次に、ホバーした時の見た目を作っていきましょう。

ボタンをホバーすると、以下の変化が起こりますね。

  • ボタンの色が反転してボーダーに色がつく
  • ハートが出現する

これらをふまえた上で、実装していきます。

/* ボタンホバー時のスタイル */
.heart-button:hover {
  background-color: #fff;
  border-color: #ef4b53;
  color: #ef4b53;
}

/* ボタンホバー時の左上のハートのスタイル */
.heart-button:hover::before {
  animation: heart 1.5s infinite ease-out;
}

/* ボタンホバー時の右下のハートのスタイル */
.heart-button:hover::after {
  animation: heart 1.5s 0.2s infinite ease-out;
}

まず最初に、ボタン本体のホバー時のスタイルを見ていきましょう。

ボタンをホバーする前と後では、以下のような変化が起こりますね。

  • 背景色:ピンク → 白
  • 文字色:白 → ピンク
  • ボーダーの色:透明 → ピンク
.heart-button:hover {
  background-color: #fff;
  border-color: #ef4b53;
  color: #ef4b53;
}

ボタンのセレクタに:hoverを付け足して、ホバー時のスタイルを設定。

ここではボタンの背景色と文字色を反転させて、ボーダーに色を付けています。

次にボタンをホバーした時のハートのスタイルを設定しましょう。

/* ボタンホバー時の左上のハートのスタイル */
.heart-button:hover::before {
  animation: heart 1.5s infinite ease-out;
}

/* ボタンホバー時の右下のハートのスタイル */
.heart-button:hover::after {
  animation: heart 1.5s 0.2s infinite ease-out;
}

animationプロパティを使って、ハートにアニメーションを設定しています。

ここではショートハンドプロパティを使って1行にまとめていますが、分解すると以下のようになります。

.heart-button:hover::before {
  animation-name: heart; /* アニメーションの名前 */
  animation-duration: 1.5s; /* アニメーションの実行時間 */
  animation-iteration-count: infinite; /* アニメーションを繰り返す回数 */
  animation-timing-function: ease-out; /* アニメーションの進行割合を指定 */
}

.heart-button:hover::after {
  animation-name: heart;
  animation-duration: 1.5s;
  animation-delay: 0.2s; /* アニメーションの開始を遅らせる */
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

まずanimation-nameには、heartを入れます。次のステップでheartという名前のアニメーションを作るので、ここで指定しています。

次のanimation-durationでは、アニメーションの開始から終了までの時間を指定します。1.5sと指定してますので、次で作るheartというアニメーションを1.5秒かけて行うという意味になりますね。

animation-iteration-countでは、アニメーションを繰り返す回数を設定します。infiniteを入れることで、ホバーしている間は無限にアニメーションが繰り返されます。

animation-timing-functionでは、アニメーションの進行速度の割合を調整できます。

  • ease-in: ゆっくり始まる
  • ease-out: ゆっくり終わる
  • ease-in-out: ゆっくり始まりゆっくり終わる

などなど、他にも多くのオプションがありますので、詳しい情報を知りたい方は調べてみてください。

ここでは滑らかにアニメーションが終了するようにease-outを設定しました。

最後に、2つ目のハートにのみanimation-delay0.2sを設定しています。これは、ホバーしてから0.2秒後にアニメーションを開始するということになります。

完成形を確認すると、右下のハートは少し遅れてから表示されていますよね。

もし2箇所のハートを同時に表示したい場合は、値を0にするか削除することで解決します。

@keyframesでアニメーションを設定する

前のステップで、animation-nameheartに設定しましたね。

ここではheartというアニメーションの中身を作っていきます。

@keyframes heart {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) scale(1.4);
    opacity: 0;
  }
}

こちらが実際のアニメーションです。0%がアニメーション開始時の状態で、100%はアニメーション終了時の状態を表しています。

このアニメーションでは、

  • ハートの透明度
  • ハートの位置
  • ハートの大きさ

がそれぞれ変化していく仕組みになっているので、一つずつ見ていきましょう。

まずopacity(透明度)ですが、最初と最後は0で、中間は1になっていますね。

開始直後はハートを透明にしておいて、徐々にフェードインさせています。そしてアニメーションが終わる手前で、透明度を下げてフェードアウトさせるというのを実装しています。

次にハートの位置の変化について見ていきましょう。translateYの部分に注目してください。

@keyframes heart {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-20px);
  }
}

translateY関数に数値を指定することで、Y軸方向に要素を動かすことができます。正の数を指定すると下方向に、負の数を指定すると上方向に動きます。

0%時点のtranslateYの値は0ですので、ここでは動きはありません。

100%時点では-20pxを指定しているので、”上方向に20px移動させる”ということになりますね。

これでハートが上に上昇していくアニメーションを設定できました。

最後に、ハートの大きさの変化について見ていきます。scaleの部分に注目してください。

@keyframes heart {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.4);
  }
}

scale関数を使うことで、要素を拡大・縮小することができます。

0%時点では値が1なので、大きさの変化はありません。

100%時点では1.4が設定されているので、大きさが1.4倍になります。

これでハートが徐々に大きくなっていくアニメーションの完成です!

スマホ端末ではハートが常に表示されるように設定する

PCだとカーソルを要素の上にホバーさせることができますが、スマホやタブレット端末ではできませんよね。

メディアクエリを使って、小さい端末で見るとハートが常に表示されるように設定していきます。

@media screen and (max-width: 768px) {

  /* ボタン本体のスタイル */
  .heart-button {
    background-color: #fff;
    border-color: #ef4b53;
    color: #ef4b53;
  }
  
  /* 左上のハートのスタイル */
  .heart-button::before {
    animation: heart 1.5s infinite ease-out;
  }

  /* 右下のハートのスタイル */
  .heart-button::after {
    animation: heart 1.5s 0.2s infinite ease-out;
  }
}

まずメディアクエリのmax-widthの値を768pxにしていますので、横幅が768px以下のデバイスでは常にハートが表示されるという設定にしています。

ここの数値は自由にカスタマイズしてください。

次に実際のスタイルの設定ですが、ボタンをホバーした時のスタイルと全く同じコードを使用します。

こうすることで、小さい端末ではハートが常に表示されるようになります。

PCでこのページを開いている方は、画面幅を768px以下まで縮小するか、スマホ端末で確認してみてください。

PCでホバーしたときと同じように、ボタンの色が反転され、ハートが浮かび上がるアニメーションが実装されているかと思います。

【まとめ】ハートが浮かび上がるボタンでサイトをオシャレにしよう!

以上、ホバーするとハートが浮かび上がるボタンの実装方法を紹介しました。

可愛い系のサイトに実装すればユーザーを惹きつけること間違いなしなので、ぜひ使ってみてください!

今回の知識を応用して、いろんな種類のボタンを作ってみるのもいいかもしれませんね。

記事が役に立ったらサポートしてください

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次