ふわふわ動くボタン、ドキドキ動くボタンの作り方をご紹介。

上下にさり気なくフワフワしたり、拡大縮小を使って浮かび上がったり沈んだりと、CSSを使えば、ちょっと目を引くアニメーションボタンが簡単にできますね。

【ドキドキ動くボタン1】

【ポン!と動くボタン2】

【ゆったりフワフワ浮遊ボタン】

【ツンと動くボタン】

【チョンとユラユラ落ちるボタン】

【ゆらゆらドスンと落ちるボタン】

ここではこれら6つのタイプのアニメーションボタンについて、順を追って作り方を詳しく見てみます。

リンクボタンはクリックするためにあるので、クリックしやすさは損なわず、あまり大きな動きではない「さりげなさ」「ちょっとした動き」が良いですね。

関連)
キラリと光るオシャレなボタンの作り方!カスタマイズまで手順を詳しく解説

拡大縮小でフワフワボタン

まず拡大縮小するボタンを作ってみましょう。

「フワフワ動く」というより「ドキッ...ドキッ...」とする「ドキドキ動くボタン」といったほうが良さそうですが(笑)、商品のセールスページなどでたまに見かけるタイプのボタンアニメーション。

まず元となるボタンを用意しますが
ボタンはCSSで作っても良いし画像をそのまま使ってもOK。

ボタンのHTML,CSS例はこちら

以下ボタンのHTML例ですが、リンク自体をボタンにする例を2パターン、
画像をボタンにする例を1パターンの合計3パターンのいずれかで、
まずボタンを用意しましょう。

【パターン1】リンクを囲ってボタンを作る例

div や li などで a要素(リンク)を囲っているHTML例。

【CSS例】リンクを囲ったボタン

【パターン2】リンク自体でボタンを作る例

リンクだけで(a要素だけで)ボタンを作るHTML例。

【CSS例】リンク自体のボタン

【パターン3】画像自体をボタンにする場合の例

画像リンクをそのままボタンにするHTML例。

【CSS例】画像自体のボタン

ドキドキアニメーションを設定

ボタンが用意できたところで、ボタンをドキドキ動かすCSSを設定しまう。

まずはボタンに対してアニメーション用のクラス「dokidoki」を追加します。

【パターン1】リンクを囲むボタンのHTML例

【パターン2】リンク自体のボタンのHTML例

【パターン3】画像リンクのボタンのHTML例

ドキドキアニメ用のCSSとして以下を追加してみてください。

【CSS例】ドキドキ動くボタン

この「dokidoki」クラスと「@keyframes huwahuwa」をCSSファイルに記載します。

実際の動作が以下のようになればOK。

動作的には、以下のようなイメージです。

  • アニメーション全体の時間は3秒(の繰り返し)
  • スタート地点(0%)から40%地点までは大きさは変わらない。
  • 40%地点から50%地点にかけて1.1倍に膨らむ
  • 50%地点から60%地点にかけて1倍(元の大きさ)に戻る
  • その後100%(最終地点)までは元の大きさのまま

アニメーションの途中で、ちょっと膨らんですぐ元の大きさに戻る、といった事を繰り返しているだけの簡単なアニメーション。

CSS中の数値を変えたりして、
好みの「ドキドキするアニメーションボタン」、作ってみてくださいね。

  • 最大何倍にするかを変えてみる
    (1.1倍を1.5倍とか2倍とかに変えてみる)
  • いつから膨らみだすかを変えてみる
    (40%、60%を35%、55%にしてみたり)
  • アニメーション全体の時間を変えてみる
    (animation-duration: 3s;の3s(3秒)を4s(4秒)にしてみる)

たとえば、膨らみだすタイミングや倍率を以下みたいに変えてみる。

  • 「40%」を「45%」にして、scaleの値を「1」から「0.9」に変更

ちょっと変えただけですが、
一瞬小さくなってポンッ!と弾けるような感じのボタンになりますね。

上下にフワフワボタン

つづいて、上下にフワフワ揺れるボタンを作ってみましょう。

4つのパターンを作ってみますが、
まず1つめは「ゆったり上下にフワフワ浮遊するボタン」。

追加するアニメーション用のクラスは「updownとしています。

1)ゆったりフワフワ浮遊ボタン

クラス「updown」は以下の例のように追加してみてください。

【パターン1】のHTML例(リンクを囲むボタン)

【パターン2】のHTML例(リンク自体のボタン)

【パターン3】のHTML例(画像リンクのボタン)

【動作例】フワフワ浮遊ボタン

【CSS例】フワフワ浮遊ボタン

@keyframeの中の「translateY」で「縦方向にどれほどれほど動くか」を指定します。

+の値で下方向、マイナスの値で上方向になるのはちょっと注意。

@keyframes の中の「%」や「translateY」の値を変えることで、いろいろとバリエーションが作れます。

たとえば、ということで、以下3つ作ってみましたのでご紹介。

2)チョンとユラユラ落ちるボタン

まず最初のバリエーションは、
チョンと上に動いてユラユラと降りてくるボタン。

【動作例】チョンとユラユラ落ちるボタン

【CSS例】チョンとユラユラ落ちるボタン

CSSについて updownクラスの内容は全く同じ。

@keyframes の中に「40%」(translateY(0))を追加しただけ。

アニメーションが40%進むまで縦方向に動かず、50%になっていきなり20px上(-20px)に動くので、そのタイミングで「チョンと上に上がる」ように見え、そこから100%になるまでユラユラと落ちて来る、といった動きになりますね。

3)ツンと動くボタン

上の「2)チョンとユラユラ落ちるボタン」の「チョン」と動く動作を強調して、たまにツンと動くボタンも作ってみましょう。

【動作例】ツンと動くボタン

【CSS例】ツンと動くボタン

CSSについて updownクラスの内容はこちらも全く同じ。

@keyframes の中に「40%」(translateY(0))、「65%」(translateY(0))の2つを追加してます。

アニメーションが40%進むまで縦方向に動かず、50%になっていきなり20px上(-20px)に動き、すぐ65%地点で縦方向が0になるので、「ビクンと上に上がってすぐ下がる」ように見えます。

ちょっとした動きで目を引きたい、などに使えそう。

4)ドスンと落ちるボタン

最後のバリエーションは、
ユラユラっと上がってドスンと落ちるアニメーションボタン。

【動作例】ドスンと落ちるボタン

【CSS例】ドスンと落ちるボタン

CSSについて updownクラスの内容はこちらもやっぱり全て同じ。

@keyframes の中に「45%」(translateY(-40px))、「60%」(translateY(0))の2つを追加して、「50%」のtranslateYを「0」にしてます。

アニメーションが45%進むまでゆっくり40px上に上がり、そこからすぐ50%に向かって標準位置より -20px下方に落ちる(上下60px落ちることになる)。

落ちてからすぐ60%に向けて0の位置に戻る(元の位置に戻る)、ということから、「ジワジワっと上がってドスンと落ちる」ように見えますね。

こちらもちょっとした動き、それも少し変わった形の動きで目を引きたい、などに使えそう。

今回のポイント

フワフワ優雅に浮遊したり、たまにピクンと動くリンクボタンは、記事を読む読者の目を引き付けるものにもなりますね。

CSSで指定するアニメーションも難しいことはなく、@keyframesの中の値をちょっと変えるだけで、いろいろなバリエーションも簡単に作れます。

ただ簡単に作れると言っても、あまりにアピールし過ぎる激しい動きは「かえって煩わしい」ものにもなるかと思いますし(つまりクリックする気が亡くなる結果にもなるし)、リンクボタンの場合には、動きが大きすぎるとクリックしづらくなるので、あまり激しい動きをしない、さり気なく注意を向けてもらうものにする、というところには注意するのが良さそうです。

CSSの中の値を色々変えてみて、
さりげなく、優雅に注意を引くオリジナルなアニメーションボタン、是非チャレンジしてみてください。

またブログで収益化をしたい、ネットビジネスを進めたいけどどうしたらいいか分からない、なかなか収益化ができないなどあれば、以下からメルマガにも登録してみてくださいね。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短で月収10万円稼げるようになる方法 ~

お名前(全角文字)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

迷惑メールは一切配信されませんので、ご安心くださいね

自らの手で未来を変える力を手に入れる!