こんにちは、リョウヘイです。
今回紹介するのは、ボタンを目立たせたいときに使えるループアニメーションです。
登録や購入ボタンのクリック率を少しでも上げたい！という要望はよくあるもの。でもデザインで目立たせようとすると、どうしてもゴテゴテしてしまいがちですよね。
そんなときは、動きで目立たせるというのも1つの手なので、覚えておくとデザインの幅が広がりますよ。もし気に入ったものがあったら、コピペして使ってOKです！
完成サンプルはこちら
まずは以下のページから実際に動きをご覧ください。それぞれに違ったアニメーション演出がついています。
ループアニメーションつきボタン01：縦にふわふわ動く
HTML
|
1 |
<a class="button floatV" href="#">ボタン</a> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.button { display: inline-block; color: #fff; font-size: 14px; text-decoration: none; background: #23a7ff; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; text-align: center; } .button.floatV { -webkit-animation: floatV 2s ease-in-out infinite alternate; animation: floatV 2s ease-in-out infinite alternate; } @-webkit-keyframes floatV { 0% { -webkit-transform: translate3d(0, -1em, 0); transform: translate3d(0, -1em, 0); } 50% { -webkit-transform: translate3d(0, 1em, 0); transform: translate3d(0, 1em, 0); } 100% { -webkit-transform: translate3d(0, -1em, 0); transform: translate3d(0, -1em, 0); } } @keyframes floatV { 0% { -webkit-transform: translate3d(0, -1em, 0); transform: translate3d(0, -1em, 0); } 50% { -webkit-transform: translate3d(0, 1em, 0); transform: translate3d(0, 1em, 0); } 100% { -webkit-transform: translate3d(0, -1em, 0); transform: translate3d(0, -1em, 0); } } |
02：横にふわふわ動く
HTML
|
1 |
<a class="button floatH" href="#">ボタン</a> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.button { display: inline-block; color: #fff; font-size: 14px; text-decoration: none; background: #23a7ff; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; text-align: center; } .button.floatH { -webkit-animation: floatH 2s ease-in-out infinite alternate; animation: floatH 2s ease-in-out infinite alternate; } @-webkit-keyframes floatH { 0% { -webkit-transform: translate3d(-1em, 0, 0); transform: translate3d(-1em, 0, 0); } 50% { -webkit-transform: translate3d(1em, 0, 0); transform: translate3d(1em, 0, 0); } 100% { -webkit-transform: translate3d(-1em, 0, 0); transform: translate3d(-1em, 0, 0); } } @keyframes floatH { 0% { -webkit-transform: translate3d(-1em, 0, 0); transform: translate3d(-1em, 0, 0); } 50% { -webkit-transform: translate3d(1em, 0, 0); transform: translate3d(1em, 0, 0); } 100% { -webkit-transform: translate3d(-1em, 0, 0); transform: translate3d(-1em, 0, 0); } } |
03：左右にコロコロ転がる
HTML
|
1 |
<a class="button roll" href="#">ボタン</a> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.button { display: inline-block; color: #fff; font-size: 14px; text-decoration: none; background: #23a7ff; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; text-align: center; } .button.roll{ -webkit-animation: roll 2s ease-in-out infinite alternate; animation: roll 2s ease-in-out infinite alternate; } @-webkit-keyframes roll { 0% { -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg); } 50% { -webkit-transform: rotateZ(20deg); transform: rotateZ(20deg); } 100% { -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg); } } @keyframes roll { 0% { -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg); } 50% { -webkit-transform: rotateZ(20deg); transform: rotateZ(20deg); } 100% { -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg); } } |
04：キラっと光る
HTML
|
1 |
<a class="button shine" href="#">ボタン</a> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
.button { display: inline-block; color: #fff; font-size: 14px; text-decoration: none; background: #23a7ff; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; text-align: center; } .button.shine { position: relative; overflow: hidden; border: 2px solid transparent; } .button.shine::before { content: ""; -webkit-animation: shine 4s cubic-bezier(0.25, 0, 0.25, 1) infinite; animation: shine 4s cubic-bezier(0.25, 0, 0.25, 1) infinite; background-color: #fff; width: 140%; height: 100%; -webkit-transform: skewX(-45deg); transform: skewX(-45deg); top: 0; left: -160%; opacity: 0.5; position: absolute; } @-webkit-keyframes shine { 0% { left: -200%; opacity: 0; } 70% { left: -200%; opacity: 0.5; } 71% { left: -200%; opacity: 1; } 100% { left: -20%; opacity: 0; } } @keyframes shine { 0% { left: -200%; opacity: 0; } 70% { left: -200%; opacity: 0.5; } 71% { left: -200%; opacity: 1; } 100% { left: -20%; opacity: 0; } } |
05：波紋が広がるように光る
HTML
|
1 |
<a class="button ripple" href="#">ボタン</a> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
.button { display: inline-block; color: #fff; font-size: 14px; text-decoration: none; background: #23a7ff; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; text-align: center; } .button.ripple { position: relative; } .button.ripple::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; z-index: -1; background: inherit; -webkit-animation: ripple 4s cubic-bezier(0.3, 0, 0.1, 1) infinite; animation: ripple 4s cubic-bezier(0.3, 0, 0.1, 1) infinite; } @-webkit-keyframes ripple { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; } 60% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.5; } 100% { -webkit-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; } } @keyframes ripple { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; } 60% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.5; } 100% { -webkit-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; } } |
06：ぼんやりと光る
HTML
|
1 |
<a class="button glow" href="#">ボタン</a> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
.button { display: inline-block; color: #fff; font-size: 14px; text-decoration: none; background: #23a7ff; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; text-align: center; } .button.glow { position: relative; -webkit-animation: glow-reverse 2s ease-in-out infinite alternate; animation: glow-reverse 2s ease-in-out infinite alternate; } .button.glow::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; z-index: -1; background: inherit; -webkit-box-shadow: 0 0 2em #23a7ff, 0 0 0.5em rgba(255, 255, 255, 0.5) inset; box-shadow: 0 0 2em #23a7ff, 0 0 0.5em rgba(255, 255, 255, 0.5) inset; -webkit-animation: glow 2s ease-in-out infinite alternate; animation: glow 2s ease-in-out infinite alternate; } @-webkit-keyframes glow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes glow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes glow-reverse { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } @keyframes glow-reverse { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } |
まとめ
というわけで今回は、ループアニメーション付きのボタンの作り方でした。シンプルな動きでもあるだけで かなり視線を集めることが出来ます。上手に使ってみてくださいね。