[CSS]ボタンのホバー時にアニメーションを適用するCSS3初心者向けのチュートリアル
Post on:2011年12月16日
sponsors
ボタンをアニメーションでチカッと光らせたり、背景画像を変更したり、サイズを変更するCSS3のチュートリアルを紹介します。
Four Simple and Fun CSS Button Hover Effects for Beginners
[ad#ad-2]
下記は各ポイントを意訳したものです。
- デモ
- 実装：共通となるHTMLとCSS
- 実装：アニメーションでボタンのサイズを変更
- 実装：アニメーションでボタンをチカッと光らせる
- 実装：アニメーションでボタンの背景をスクロール
- 実装：ボタンを押した感じに
デモ
デモでは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;
}
[ad#ad-2]
実装：アニメーションでボタンのサイズを変更
ボタンのサイズをアニメーションで変更します。
デモページ: 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));
}
sponsors
