コンバージョン達成に一役買いそうなドキドキしてるボタンのサンプル

こんばんは。
なぜか家の中のほうが外より寒くて困っています。

最近、ボチボチ推していこうかと考えている表現方法をご紹介いたします。

たとえばLPなんかで申し込みのボタンがあったとして、「ただ貼ってあるだけでは寂しい…」
というとき、Flashで実装してもいいと思うのですが流行としてはナンセンスかもしれません。

と、いうわけでCSS3でボタンをドキドキさせてみました。

いかがでしょう。普通のボタンより、クリックしたくなるでしょうか？
※スイマセン、iPhoneで見たら動いてませんね…

ではソースです。

HTMLはこちら。

で、CSS

a.button_area {  	margin: 0 auto;  	display: block;  	position: relative;  	}  img.button_top , img.button_base {	  		transition: all .3s ease-in-out 0s;  	-webkit-transition: all .3s ease-in-out 0s;  	-moz-transition: all .3s ease-in-out 0s;  	-o-transition: all .3s ease-in-out 0s;  	}    a.button_area img.button_top {  	position: absolute;  	top: 65px;  	left: 45px;  	z-index: 311;  	/*Button animation setting*/    animation: inout 1.4s;    animation-iteration-count: infinite;    -webkit-animation: inout 1.4s; /* Safari & Chrome */    -webkit-animation-iteration-count: infinite;  }    a.button_area:hover > img.button_top{  	margin-left: 40px;  	animation: none;  	-webkit-animation: none;  	}  @keyframes inout {    0%   { transform: scale(1, 1); }    5%  { transform: scale(1.5, 1.5); }    6%  { transform: scale(1.2, 1.2); }    10%  { transform: scale(1.3, 1.3); }    100% { transform: scale(1, 1); }  }    @-webkit-keyframes inout { /* Safari & Chrome */    0%   { -webkit-transform: scale(1, 1); }    5%  { -webkit-transform: scale(1.5, 1.5); }    6%  { -webkit-transform: scale(1.2, 1.2); }    10%  { -webkit-transform: scale(1.4, 1.4); }    100% { -webkit-transform: scale(1, 1); }  }    a.button_area:hover > img.button_base{ opacity: 0.85; filter: alpha(opacity=85%) }

HTMLのコツは、リンク先で「可動部の画像」と「ボタンの本体の画像」を内包することですね
そうすることでクリックできる領域の確保をしています。

あと、可動部(サンプルでドキドキしている方)は必ずPNGで制作すること。透過が必要ないのであればそこは結構ですが
やはりきれいな図が好ましいです。

続いてCSSについて！今回は@keyframeを使っています。

CSS3のアニメーション系プロパティ@Keyframesとは？

主にオブジェクトを動的に拡大、移動させるプロパティです
立派なCSS3なのでモチロンIE9とかまでは対応していません。

あと、偉そうなこと言ってますが実際、自分もスクラッチではまだすべて書けないです。笑

種類は

scale( X , Y )　大きさ
rotate( X , Y )　角度
screw( X , Y )　ねじれ
translate( X , Y )　移動

といった感じでその中からscaleをご紹介します。

1～8行目はボタン領域のCSSですね。
必要に応じて記述しましょう

6～10でアニメーションの変化の仕方。ベンダープレフィックスも書いておきます

19～22が本題です。
19行目のanimation: inout 1.4sは、「inout(自分で付けたアニメーション名)」　「[1.4s(変化の1サイクルに必要な時間)」です。
20行目のanimation-iteration-count: infinite; これは変化を無限に継続するという指定です。
数字で回数を指定することもできます。

25～28でマウスオーバー時の処理。
ボタンの可動部、本体ともにtransitionを指定しているのでどちらもマウスオーバーで効果を与えることができます。
ボタン本体は若干、透過させます。同時に、可動部のドキドキはなくなる仕組みです。

そう、触れたら終わりなのです。

30行目からですがここの@keyframes inout{}
@keyframesに続けて半角スペースときて、アニメーション名を指定します。
続けて、効果のタイミングと内容を指定します。

0%(from)から始まり100%(to)で終わり、これが、上で指定した1.4s=1.4秒間の中で行われ、繰り返されます。

指定の仕方は、

transform scale(横 , 縦);

今回は、等分に拡大縮小するので、そういった場合は()の中に一つの値だけでOKです。

いかがでしょう。ちなみに気になる対応状況ですが…