十字架ラビアンローズ

クリックした時に、まるで本当にボタンを押したかのようにリアルなアニメーションを展開するボタンを、CSS3で表現する方法を紹介します。

  1. トップページ
  2. Webサイト構築
  3. CSS
  4. クリックすると「押すアニメーション」をするボタンをCSS3で表現する方法

クリックすると「押すアニメーション」をするボタンをCSS3で表現する方法

2015.2.28.Sat. 12:32

以下のボタンを、気持ち長めにクリックしてみて下さい(ページ遷移等はしません)。

sample

このようなボタンを、CSS3で表現する方法を紹介します。

マークアップ手順

HTMLの方では、これといって特別な事は行いません。


<a href="xxx.html"><span>sample</span></a>

CSSは以下のように指定します。


a
{
display:inline-block;
outline:none;
text-decoration:none;
box-shadow:0 8px 0 #c491a2, 0 15px 20px rgba(0,0,0,0.35);
transition:box-shadow 0.2s ease-in-out;
}

a span
{
display:inline-block;
color:#ffffff;
background-color:#e599b2;
transition:transform 0.2s ease-in-out;
}

a:active
{
box-shadow:0 8px 0 #c491a2, 0 12px 10px rgba(0,0,0,0.3);
}

a:active span
{
transform:translate(0,4px);
}
a
display:inline-block;
後々padding等を適用させる為に設定しておきます。
outline:none;
text-decoration:none;
ユーザビリティ上はあまり宜しくありませんが、ボタン状に表示させているリンクにアウトラインや下線が表示されてしまうと不恰好である為、消去しておきます。
box-shadow:0 8px 0 #c491a2, 0 15px 20px rgba(0,0,0,0.35);
0 8px 0 #c491a2でボタンの厚み、0 15px 20px rgba(0,0,0,0.35)でボタン周辺の影を表現します。
影の大きさや色は、任意で数値等を指定して下さい。
transition:box-shadow 0.2s ease-in-out;
アニメーションを指定します。
  • box-shadowbox-shadowプロパティについてアニメーションを適用させる事を意味します。
  • 0.2s … 0.2秒かけてアニメーションを展開します(秒数はお好みで調整して下さい)。
  • ease-in-out … アニメーションをゆっくり開始させてゆっくり終了させるという指定です。
a span
display:inline-block;
後々padding等を適用させる為に設定しておきます。
color:#ffffff;
background-color:#e599b2;
お好みで文字色・背景色を指定します。
transition:transform 0.2s ease-in-out;
アニメーションを指定します(解説は上述を参照)。
a:active
box-shadow:0 8px 0 #c491a2, 0 12px 10px rgba(0,0,0,0.3);
ボタン状のリンクがクリックされた瞬間の、ボタンの厚み・ボタン周辺の影を指定します。
前者は通常時と同様の設定でOK、後者は少し影の範囲を狭めて色を濃くするとそれらしくなります。
a:active span
transform:translate(0,4px);
ボタン状のリンクがクリックされた瞬間に、ボタンのラベルとなる部分を下方向に移動させ、あたかもボタンが凹んだように見えるよう演出させます。
数値は、通常時のボタンの厚みを下回る数値の範囲内で、任意で設定して下さい。

表示サンプル

上述の、必要最低限レベルのマークアップを適用させたリンクが、以下になります。

sample

これにpaddingborder-radiusを指定し、見た目を調節します。
お好みでボタンの背景色をグラデーションや背景画像にしても良いでしょう。
CSSサンプルも併せて掲載しますので、参考にしつつ色々いじってみて下さい。

sample


a
{
display:inline-block;
outline:none;
text-decoration:none;
border-radius:4px;
box-shadow:0 8px 0 #c491a2, 0 15px 20px rgba(0,0,0,0.35);
transition:box-shadow 0.2s ease-in-out;
}

a span
{
display:inline-block;
padding:4px 10px;
color:#ffffff;
background-color:#e599b2;
letter-spacing:1px;
font-weight:bold;
border-radius:4px;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
transition:transform 0.2s ease-in-out;
}

a:active
{
box-shadow:0 8px 0 #c491a2, 0 12px 10px rgba(0,0,0,0.3);
}

a:active span
{
transform:translate(0,4px);
}

Twitter

アーカイブ

全記事アーカイブ

ブログパーツ

  • アイラブ地元ブログパーツ