【CSSコード付き】CTAボタンに効果的な簡単ホバーエフェクト

カテゴリ

スマートフォンファーストでマテリアルデザインなボタンが急増しました。
レスポンシブ対応なページが多いため、そのまま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;

このプロパティを使用することにより、ふんわりホバーエフェクトがかかります。ちょっとした演出の違いで見栄えが良くなる優れものです。今回は「0.2秒かけていい感じで切り替わる」という指定です。

透過する

ボタン

opacity プロパティで、要素の不透明度を変更します。
記述がないものは原則1.0となるため、値を下げることで透過させています。

CSS

.btn:hover{
  opacity: 0.6;
}

背景色を変える

ボタン

背景色を変更します。
元の背景色を上書きしている状態です。

CSS

.btn:hover{
  background-color: #E6A1C0;
}

枠色、背景、文字カラーを変える

ボタン

ボタンに枠線を追加して、背景色・枠色・文字色を変更します。
初期状態で背景と同色の枠線を追加することにより、ホバーした時に見た目の崩れが解消できます。

CSS

.btn{
  /*背景色と同じ枠色を追加*/
  border: 2px solid #444;
}
.btn:hover{
  background-color: #fff;
  border-color: #444;
  color: #444;
}

拡大する

ボタン

transformプロパティで拡大します。
1を基準として、scale(X軸, Y軸)を数値で変形させます。

CSS

.btn:hover{
  transform: scale(1.1, 1.1);
}

角丸を矩形に変化

ボタン

border-radiusプロパティを0の状態にします。

CSS

.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で動かしたい方向を拡張させます。今回は左右のため1つ目の数値を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ボタンのクリック率が上がるのであれば、ホバーエフェクトをつける価値はあります。ぜひ今回のアニメーションを参考に実装してみてください。

Share on

お問い合わせはこちら

HTML/CSSコーディングの課題はクーシーが解決します

  • HTML/CSS
    コーディング

    複雑化したHTML/CSSの構築実績を持つ制作会社は多くありません。マークアップと多様なブラウザ対応を行います。

クーシーの制作実績

すべての制作実績をみる

HTML/CSSコーディングに役立つ記事はこちら

カテゴリ一覧

COOSY BLOG TOP