【クリック率UP】カーソルをホバーすると沈むボタンを実装する

HTMLとCSSだけでカーソルをホバーすると、以下のような沈み込むようなボタンを簡単に実装することができます。

ホバーすると沈みます

私自身、他の所有しているメディアのボタンを沈み込む上記のようなボタンに変えただけで、CTR（クリック率）が約2倍になりました。（というか、以前ボタンデザインした時は自分でCSSを扱えずダサいデザインだった…）

やっぱりなんとなく「押したくなるボタン」にするのがUI/UXを配慮する上では必須なので、こういった細部のギミックにはこだわりたいところです。

では実際に沈みこむボタンのコードを見ていきましょう。

ホバーで沈むボタン実装例①

下のHTMLコードと、CSSコードのコピペで基本的には沈むボタンが完成しますが、お好みでCSSを調整してください。（念のために補足も入れておきます。）

▼HTML

<div class="button">  <a href="リンクはこちら">ここにテキストを入れてください</a>  </div>

上記のコードをHTML側に貼り付けてください。

▼CSS

.button a {width: 200px;background-color: #333;border-radius: 5px;box-shadow: 0 3px 0 rgba(0,0,0,0.3);color: #ffffff;display: block;font-size: 14px;text-align: center;text-decoration: none;margin: 10px auto;padding: 10px 0;}.button a:hover {box-shadow: 0 1px 0 rgba(136,136,136,1);margin: 12px auto 8px;}

上記のコードをCSS側に貼り付けてください。

CSSコードのそれぞれの項目を解説します。

平常時のボタンCSS

width: 200px;

widthは横幅を指定しています。

background-color: #333;

ボタンの背景色を指定しています。カラーコードはお好みで調節してください。「CSS + カラーコード」とかで色は検索できます。

border-radius: 5px;

ボタンの縁がどれくらい丸みを帯びるかを調節できます。

box-shadow: 0 3px 0 rgba(0,0,0,0.3);

ボタンの影を垂直方向につけています。数字は左からX軸、Y軸、ぼかし具合です。後半のrgbaは影の色の指定方法です。rgbaでなくとも、#333とかでの指定も可能ですが、透明度を出したいので、rgbaを選択しています。

color: #ffffff;

文字色を指定しています。

display: block;

aタグに横幅や高さを与えるために必須の記法です。文中に回り込ませたい場合はdisplay: inline-block;とかに変更してください。

font-size: 14px;

文字サイズです。

text-align: center;

文書位置を中央に寄せています。

text-decoration: none;

aタグはデフォルトで、下線がついたりしてダサいのでそれを除去しています。

margin: 10px auto;

上下に余白を10pxとり、autoで中央寄せ指定しています。

padding: 10px 0;

ボタン内部で上下に余白を10pxとって、高さを持たせています。

ホバー時のボタンCSS

次にホバー次のCSSについて解説します。

box-shadow: 0 1px 0 rgba(0,0,0,0.3);

ボタンの影の記述ですが、ホバー時には垂直方向の数値を3px→1pxにして、沈み込む際の影の長さを調整しています。

margin: 12px auto 8px;

ここが肝要なのですが、マージンの上部を12pxとし、マージン下部を8pxとすることでその差分の4pxを出すことで、沈み込むボタンを再現しています。

最近まではこの手法がよく使われておりましたが、環境によっては結構不具合生じる記述方法なので、注意点をご紹介しておきます。

上記のような注意点があるので、私としてはもう一つの実装例をオススメしています。

ホバーで沈むボタン実装例②

▼HTML

<div class="button2">  <a href="リンクはこちら">ここにテキストを入れてください</a>  </div>

上記のコードをHTML側に貼り付けてください。

▼CSS

.button2 a {  width: 200px;  background-color: #333;  border-radius: 5px;  box-shadow: 0 3px 0 rgba(0,0,0,0.3);  color: #ffffff;  display: block;  font-size: 14px;  text-align: center;  text-decoration: none;  margin: 10px auto;  padding: 10px 0;}.button2 a:hover { box-shadow: none; transform: translate3d(0, 3px, 0);}

上記のコードをCSS側に貼り付けてください。

CSSコードのそれぞれの項目を解説します。

平常時のボタンCSS

ホバーで沈むボタン実装例①と特に変わりはないです。

ホバー時の記述に変更を加えています。

ホバー時のボタンCSS

box-shadow: none;

ボタン平常時には影をつけてましたが、ホバー時にはそれを消しております。

transform: translate3d(0, 3px, 0);

ここがミソです。実装例①ではmarginの差分で沈むボタンを再現していましたが、こちらではtransform: translate3dという記述で下に沈み込むボタンを再現しています。

左からX軸,Y軸,Z軸なので、今回はY軸を3px下げるという指定をしてあります。この方法では画面が動いたり、他要素が影響を受けることもないのでボタンだけをうまく沈みこませることができます。

ご参考までに。