BLOG MENU

【ホバーエフェクト】コピペで完成！CSSでボタンの作り方！

スマートフォンファーストでマテリアルデザインなボタンが急増しました。
レスポンシブ対応なページが多いため、そのままPCデザインへと反映されることが多いです。
要素が縦並びになりやすいスマートフォン画面より、構成の自由が効くPC画面の方が他のものに目移りしやすく、押してほしいボタンが発見しにくくなりやすいです。

そのためCTAを促すボタンに何か特徴をもたせることが有効。
今回はボタンのホバーエフェクトの追加で補う方法を紹介します。

デザインカンプにはないホバー要素は、コーダーに実装を任されることが多いので、簡単にCSSを活用してコーディングしていきましょう。

そもそもホバーエフェクトとは？

ホバー（hover）とは、マウスカーソルを、画像やリンクの上で通過させた時に変化が起こる状態のことをいいます。マウスを乗せるとボタンの色が変わったり、補足説明の吹き出しを表示することができるため、より伝えたい情報や説明の補助に用いられることが多いです。スマートフォンではタッチパネル方式のタップの判定になるため、ホバーの値を設定しても利用できません。
ホバー状態になった要素の変化を表すもので、CSSの擬似クラスで設定を変更できます。
記述方法は下記のとおりです。

.class名:hover{
  プロパティ:値;
}

共通のHTML/CSS

基本のHTMLになります。
デザインカンプがすでにある場合は、適所変更してください。

ボタン

HTML

<a href="#" class="btn">ボタン</a>

CSS

.btn{
  width: 209px;
  padding: 14px 0 16px 0;
  font-size: 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  display: block;
  margin: 0 auto;
  color: #fff;
  background: #444;
  line-height: 1;
  border-radius: 50px;
  transition: all .2s;
}

★Point：transitionについて

  transition: all .2s;

.btn:hover{
  border-radius:0px; 
}

簡略化されて一括で角丸の数値を指定していますが、本来は下記のような記載が必要です。

  /* 左上 | 右上 | 右下 | 左下 */
  border-radius: 50px 50px 50px 50px;

下方に移動する

ボタン

box-shadowプロパティを追加して、シャドウ効果を追加します。
ホバーでその処理を一度取り消し、さらにtransformプロパティで下方に移動させ、ボタンを押下しているように見せています。

CSS

.btn{
  /*シャドウ追加*/
  box-shadow: 0 3px 5px rgb(0 0 0 / 50%);
}
.btn:hover{
  box-shadow: none;
  transform: scale(0.99, 0.99) translateY(2px);
}

左右のグラデーションカラーに変える

ボタン

background（背景色）を linear-gradient要素を使用して線形グラデーションを追加します。background-positionでグラデーションの開始位置を設定して、background-sizeで動かしたい方向を拡張させます。今回は左右のため１つ目の数値を2倍に設定して、スタート位置（左端）のグラデーションが見えるようにしています。

CSS

.btn{
  /*背景の色を変更*/
  background: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
  background-position: 0% 50%;
  background-size: 200% auto;
}
.btn:hover{
  background-position: 100% 50%;
}

グラデーション

  /* グラデーションの角度または方向, 開始色, 途中色, 終了色*/
  background: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);

※グラデーションの記載方法は複雑なため、ジェネレーターを使用すると展開しやすいです。

背景画像サイズ

  /* 横幅 | 高さ */
  background-size: 200% auto;

ホバーした際に、終わりのグラデーション（右端）に寄るように設定して完了となります。

光らせる

ボタン

@keyframes規則を用いて、一連のCSSアニメーションの途中を制御することができます。合わせてanimationプロパティを用いることでアニメーションを表情豊かに出来ます。

CSS

.btn:hover{
  animation: shine 1s;
}
@keyframes shine {
  0% { background: #444; }
  10% { background: #ccc; }
  100% { background: #444; }
}

★Point：animation プロパティと@keyframesについて

animationプロパティでは、アニメーションの名前、かかる時間、効果などを設定することが出来ます。そこにどのような変化を加えていくのかを指定するのが@keyframesです。animationプロパティで設定した時間分の開始（0%）から終了（100%）までの動きを設定することができます。

まとめ

ホバーエフェクトは自分の手持ちのアイディアから出すことが多いです。スマートフォン画面では見えないPC画面専用の装飾のため、できるだけ違和感なくイメージを崩さず実装することが求められます。

CSSを一行追加するだけでCTAボタンのクリック率が上がるのであれば、エフェクトをつける価値はあります。ぜひ今回のアニメーションを参考に実装してみてください。

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラクスル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。