あらゆるサイトで利用されているボタンは、小さいですがユーザーが直接操作を行う重要なパーツ要素のひとつです。ボタンをデザインをするとき、見た目だけでなく押したときのエフェクトの作成に迷ってしまうという人も少なくないでしょう。
今回、Animocons というCodropsによるアニメーションボタンを使い、Bootstrapを使う感覚で、HTMLとクラス名を書くだけでアニメーションつきのボタンが簡単に実装できるようにしました。
注目が集まっているアニメーションを利用した、動きにアクセントのあるボタンデザインを作成してみてはいかがでしょう。
※ 改編はMITライセンスの下で行っています。
目次
1. プラグインサンプル
使い方は簡単で、クラスつきのHTMLを書くと、その要素がアニメーションボタンになります。
※ アイコンにはFont Awesomeを利用しているので、アイコン画像やSVGの準備は不要です。
いいねボタン&お気に入りボタンのサンプル。
See the Pen PGBEKv by ya90net (@ya90net) on CodePen.
カードタイプのボックスに、お気に入りボタンとして利用。
※ アニメーションを1度だけにする機能も付いています。
See the Pen Web Material Card Concept : mod by ya90net by ya90net (@ya90net) on CodePen.
アニメーションのスイッチとしても活躍します。ここでは、当サイトのロゴを利用しています。
See the Pen BETA Camp Animated Logo by ya90net (@ya90net) on CodePen.
2. 動作環境
モダンブラウザにて動作確認済み。
古いIEでは動作要チェックです。
3. 使い方
上のカードタイプのボックスを見本に、くわしい使い方を見ていきましょう。
1. JSファイルのダウンロードと読込み
まずAnimoconsをダウンロードします。
※クリックするとダウンロードが始まります。
ダウンロード後、ファイルを解凍します。
ファイルの中には、
animocons.min.js
animocons.min.css
が入っているので、好きな場所へ移動しましょう。
次に、ダウンロードしたJSとCSSを読み込みます。
JSの場所はhead内やbody要素の最後部など好きなところでOKです。
<script src="animocons.min.js"></script>
CSSは他のCSSに上書きされるのを防ぐため、BootstrapやオリジナルのCSSの後で読み込みます。
<link rel="stylesheet" type="text/css" href="animocons.min.css" />
※JS、CSSともパスは環境に合わせて変更しましょう。
2. Font Awesomeの読込み
次にアイコンを表示するためのFont Awesomeを読み込んでいきます。
こちらは１行コードを好きなところに追加するだけでOKです。
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
もちろん自分でダウンロードしたFont Awesomeや、必要なアイコンのみに削ったバージョンを使用しても大丈夫です。
3. ボタン用のHTMLを追加する
まずは、はじめにカード全体のHTMLをチェックしてみましょう。
<div class="row">
<div class="small-7 medium-5 large-4 column end small-centered card">
<div class="card-top"><img src="https://photoshopvip.net/wp-content/uploadss/2016/10/Animocons_Featured.png" class="card-img"/></div>
<div class="triangle">
<div class="circle-button">
<!-- ここにボタンを設置したい -->
</div>
</div>
<div class="card-bottom text-center">
<h2 class="card-title">Animocons</h2>
<p class="card-desc">パワフルなアニメーションがついたボタン<br/>動きとともにオンとオフが切り替わります</p>
</div>
</div>
</div>
コメント部分にボタンを設置していきます。
ボタンになるHTMLはこちら。
<button class="icobutton icobutton-3-ccc-red"> <span class="fa fa-heart"></span> </button>
button要素についた icobutton と icobutton-3-ccc-red がAnimocons用のクラスです。
※ 2行目はアイコンです。このクラス名はFont Awesomeの使い方に沿って、
ハートなら：fa fa-heart
スターなら：fa fa-star
という風に、使いたいアイコン毎に変更しましょう。
Animocons用クラスのくわしい説明
ここでもう少しくわしく、Animocons用のクラスの使い方を説明していきます。
まずAnimocons用の2つのクラスは、それぞれ
icobutton：このbutton要素がAnimoconであることを示す
icobutton-3-ccc-red：アニメーションの種類、始まりの色、変化後の色を指定
という役割をもっています。
1つ目はいつも同じでOKです。
2つ目は使いたいアニメーション、色によってカスタムすることが可能です。
それでは、はじめにどんなアニメーションが使えるか見ていきましょう。
アニメーションは全部で17種類です。
| アニメーション No. | アニメーション |
|---|---|
| 1 / 2 / 3 | |
| 4 / 5 / 6 | |
| 7 / 8 / 9 | |
| 10 / 11 / 12 | |
| 13 / 14 / 15 | |
| 16 / 17 |
次に、始まりの色、変化後の色をみていきます。
デフォルトで使える色は、
red・blue・green・yellow・orange・pink・purple・grey・white・black
の10種類。
その他の色を使いたい場合は、
2196f3 や ccc
のように、Hex値で好きな色を指定することもできます。
2つ目のクラスの書き方は、
icobutton-[アニメーション No.]-[始まりの色]-[変化後の色]
と、icobutton、アニメーションの種類、始まりの色、変化後の色、をハイフンでつなげるだけです。
いくつかサンプルクラスを作ってみたので、実際に動いている様子をみてみましょう
icobutton-7-grey-ffd715
| クラス名 | アニメーション |
|---|---|
| icobutton-6-grey-red | |
| icobutton-3-grey-blue | |
| icobutton-12-c0c1c3-green | icobutton-7-grey-ffd715 |
| icobutton-9-c0c1c3-f44336 |
きちんとクラス名によってアニメーションと色が変わっています。
今回の見本では icobutton-3-ccc-red を使っていきます。
使用後のHTMLはこんな感じ。
<div class="row">
<div class="small-7 medium-5 large-4 column end small-centered card">
<div class="card-top"><img src="https://photoshopvip.net/wp-content/uploads/2016/10/Animocons_Featured.png" class="card-img"/></div>
<div class="triangle">
<div class="circle-button">
<button class="icobutton icobutton-3-ccc-red">
<span class="fa fa-heart"></span>
</button>
</div>
</div>
<div class="card-bottom text-center">
<h2 class="card-title">Animocons</h2>
<p class="card-desc">
パワフルなアニメーションがついたボタン<br/>動きとともにオンとオフが切り替わります
</p>
</div>
</div>
</div>
この状態で、確認してみるとこのようになります。
See the Pen Web Material Card Concept : mod by ya90net by ya90net (@ya90net) on CodePen.
フォントサイズ・表示位置にはまだスタイルが当たっていません。
イメージに合うように、つぎの点を修正していきます。
1.フォントサイズを大きく
2.中心に表示
3.hover、focus時の背景色を透明に
下のCSSを追加して、修正は完了です。
.icobutton {
/* フォントサイズを大きく */
font-size: 1.8em;
/* 中心に表示 */
top: 50%;
left: 50%;
transform:translate(-50%, -42%);
}
.icobutton:hover,
.icobutton:focus {
/* hover、focus時の背景色を透明に */
background: transparent;
}
これで準備はほとんどOKですが、最後に、1度だけアニメーションする機能をつけます。
これは簡単で、buttonタグにonceクラスをつけるだけです。
完成版のHTMLはこのようになりました。
<div class="row">
<div class="small-7 medium-5 large-4 column end small-centered card">
<div class="card-top"><img src="https://photoshopvip.net/wp-content/uploads/2016/10/Animocons_Featured.png" class="card-img"/></div>
<div class="triangle">
<div class="circle-button">
<button class="icobutton icobutton-3-ccc-red once">
<span class="fa fa-heart"></span>
</button>
</div>
</div>
<div class="card-bottom text-center">
<h2 class="card-title">Animocons</h2>
<p class="card-desc">
パワフルなアニメーションがついたボタン<br/>動きとともにオンとオフが切り替わります
</p>
</div>
</div>
</div>
6行目に1回だけアニメーションするためのonceクラスを追加しています。
これできちんと表示されるようになりました。
See the Pen Web Material Card Concept : mod by ya90net by ya90net (@ya90net) on CodePen.
3. 注意点
ボタンのHTMLには、必ずbuttonタグとspanタグを使う点に注意です。
また、うまく表示できない時は、他の場所のCSSのスタイルが当たっていないかチェックしてみましょう。
最後に。
今回のAnimconsはシンプルなHTMLとクラス名を組み合わせるだけで、さまざまなバリエーションのボタンを作ることができます。
HTML/CSSを始めたばかりのひとにもオススメしたいテクニックとなっています、ぜひ効果的で楽しいボタンをつくってみましょう。
