CSSで手軽にアニメーションを設定できるようになった今、Webサイト上には様々なアニメーションが見られますね。
中でもWebページ上のボタンには、アニメーションが設定されていることが多いです。
今回の記事では、ホバーするとハートがふわっと浮かび上がるボタンの実装方法を紹介します！
CSSのみで実装していきますので、是非試してみてください。
ホバーするとハートが浮かび上がるボタンの完成形
今回実装するボタンはこちらです。
PCでページをご覧の方は、ホバーすることでハートが浮かび上がる様になっていますね。
しかし、スマホやiPadなどの端末ではホバーできません。なので横幅768px以下のデバイスでは、ホバーしなくてもハートのアニメーションが見えるようにしています。
それでは、実際に作り方を見ていきましょう！
ホバーするとハートが浮かび上がるボタンの制作手順
HTML、CSS、ハートの画像を使用して作っていきます。
- HTMLで型をつくる
- ハートの画像を用意する
- CSSでボタンを装飾する
という順番で制作していきますね。
手順1.HTMLでハートのボタンの型をつくる
<a class="heart-button">BUTTON</a>HTMLはこれだけです。
ボタンのHTML要素を作成して、好きなテキストを入れてください。
リンクを設定したいならaタグを、フォームの送信ボタンなどを実装するならbuttonタグをお使いください。
ここではheart-buttonというクラスを付けていますが、クラス名はなんでも構いません。
手順2.ハートの画像を用意する
今回の実装では、ハートの部分は画像を使用します。
ハートの画像はこちらをクリックしてダウンロードしてください。
heart.svgとheart-reverse.svgの2つを用意しています。
自分で画像を用意したい方は、Iconfinderなどのサイトからお気に入りの画像をダウンロードするのがいいですね。
画像の形式は、pngかsvgを使用してください。
画像が用意できたら、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種類のハートの共通スタイルを設定した後、個別に画像の読み込みと位置調整を行っています。
ハートの大きさを変えたい場合は、widthとheightの値を調整してください。
また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-delayに0.2sを設定しています。これは、ホバーしてから0.2秒後にアニメーションを開始するということになります。
完成形を確認すると、右下のハートは少し遅れてから表示されていますよね。
もし2箇所のハートを同時に表示したい場合は、値を0にするか削除することで解決します。
@keyframesでアニメーションを設定する
前のステップで、animation-nameをheartに設定しましたね。
ここでは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でホバーしたときと同じように、ボタンの色が反転され、ハートが浮かび上がるアニメーションが実装されているかと思います。
【まとめ】ハートが浮かび上がるボタンでサイトをオシャレにしよう！
以上、ホバーするとハートが浮かび上がるボタンの実装方法を紹介しました。
可愛い系のサイトに実装すればユーザーを惹きつけること間違いなしなので、ぜひ使ってみてください！
今回の知識を応用して、いろんな種類のボタンを作ってみるのもいいかもしれませんね。
コメント