[CSS]ボタンのホバー時にアニメーションを適用するCSS3初心者向けのチュートリアル

ボタンをアニメーションでチカッと光らせたり、背景画像を変更したり、サイズを変更するCSS3のチュートリアルを紹介します。

サイトのキャプチャ

Four Simple and Fun CSS Button Hover Effects for Beginners

下記は各ポイントを意訳したものです。

デモ

デモでは3種類のアニメーションと1種類のホバーエフェクトがあり、Chrome, Safari, Firefoxでご覧ください。

デモのキャプチャ

デモページ

実装:共通となるHTMLとCSS

各ボタンの共通となるHTML, CSSです。

HTML

各ボタンはシンプルなテキストリンクで実装されています。

<a href="#" id="button2" class="buttonText">Sign Up Now</a>

CSS

ボタンのフォントとカラーをセットし、下線を消します。

.buttonText {
  font: 18px/1.5 Helvetica, Arial, sans-serif;
  color: #fff;
}
 
a {
  color: #fff;
  text-decoration: none;
}

実装:アニメーションでボタンのサイズを変更

ボタンのサイズをアニメーションで変更します。

デモのキャプチャ

デモページ: demo 1

CSS:Basic

ボタンに「display:block;」でブロック要素にし、ボタンの基本となるスタイルをセットします。

#button1 {
  background: #6292c2;
  border: 2px solid #eee;
  height: 28px;
  width: 115px;
  margin: 50px 0 0 50px;
  padding: 0 0 0 7px;
  overflow: hidden;
  display: block;
}

CSS3

CSS3の角丸・グラデーションを使って、美しくスタイルします。
このスタイルはCSS3アニメーションには関係がないため、あえて切り離しています。

  /*Rounded Corners*/
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
 
  /*Gradient*/
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

CSSアニメーション

アニメーションをセットします。
これはかなりシンプルで、アニメーションの持続時間を0.5秒にしました。

  /*Transition*/
  -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  -ms-transition: All 0.5s ease;
  transition: All 0.5s ease;

ホバー時のCSS

最後にホバー時のアニメーションするスタイルをセットします。
0.5秒の間に、幅が200pxになるようにします。

#button1:hover {
  width: 200px;
}

実装:アニメーションでボタンをチカッと光らせる

このエフェクトはこの中で一番シンプルです。
ホバー時に背景のカラーをアニメーションで変更します。

デモのキャプチャ

デモページ: demo 2

CSS:Basic

基本となるスタイルです。背景は好みのカラーに変更してください。

#button2 {
  background: #d11717;
  border: 2px solid #eee;
  height: 38px;
  width: 125px;
  margin: 50px 0 0 50px;
  overflow: hidden;
  display: block;
  text-align: center;
  line-height: 38px;
}

CSS3

オプションとなるCSS3のスタイルは今回「box-shadow」を加えました。カラー指定にはRGBaを使い不透明度を設定しています。

 /*Rounded Corners*/
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
 
  /*Gradient*/
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
 
  /*Shadow*/
  -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSSアニメーション

アニメーションの設定は、一つ目と同じ0.5秒です。

  /*Transition*/
  -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  -ms-transition: All 0.5s ease;
  transition: All 0.5s ease;

ホバー時のCSS

ホバー時に適用する背景のカラーをセットします。アニメーションが綺麗に見えるようなカラーを選択してください。

#button2:hover {
  background-color: #ff3434;
}

実装:アニメーションでボタンの背景をスクロール

このエフェクトは本当に面白く、使用する背景画像によって異なる印象を与えます。
ここではパターンの背景画像を使い、繊細なエフェクトを与えています。

デモのキャプチャ

デモページ: demo 3

CSS:Basic

今までのものとほとんど同じですが、背景画像をセットしています。背景画像はホバー時に垂直方向にポジションを変更するので、長いものを使用してください。

#button3 {
  background: #d11717 url('bkg-1.jpg');
  background-position: 0 0;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
  font-size: 22px;
  height: 58px;
  width: 155px;
  margin: 50px 0 0 50px;
  overflow: hidden;
  display: block;
  text-align: center;
  line-height: 58px;
}

CSS3

オプションとなるCSS3は、角丸・ボックスシャドウを使用します。

  /*Rounded Corners*/
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
 
  /*Shadow*/
  -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSSアニメーション

アニメーションの持続時間を少し長くセットしてみました。

  /*Transition*/
  -webkit-transition: All 0.8s ease;
  -moz-transition: All 0.8s ease;
  -o-transition: All 0.8s ease;
  -ms-transition: All 0.8s ease;
  transition: All 0.8s ease;

ホバー時のCSS

ホバー時に背景画像のポジションをアニメーションで変更します。今回はより繊細に見せるため、持続時間を長くしています。

#button3:hover {
  background-position: 0 150px;
}

実装:ボタンを押した感じに

最後はアニメーションは使用しませんが、ボタンのエフェクトでよく見かけるプレスしたボタンです。

デモのキャプチャ

デモページ: demo 4

CSS:Basic

ここではプレスした際に繊細な影をつけるため、text-shadowをセットしています。

#button4 {
  background: #5c5c5c;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
  font-size: 22px;
  height: 58px;
  width: 155px;
  margin: 50px 0 0 50px;
  overflow: hidden;
  display: block;
  text-align: center;
  line-height: 58px;
}

CSS3

今回のCSS3のスタイルはオプションではありません。
このエフェクトを実装するためにはシャドウとグラデーションは必要なものです。

  /*Rounded Corners*/
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
 
  /*Shadow*/
  -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
 
  /*Gradient*/
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

ホバー時のCSS

ホバー時にはシャドウとグラデーションのスタイルを変更し、擬似的な3Dのエフェクトを与えます。

#button4:hover {
  margin-top: 52px;
 
  /*Shadow*/
  -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
 
  /*Gradient*/
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

top of page

©2017 coliss