今回のお題は、アニメーションするボタンだ。マウスポインタを重ねると追加情報が現れる(サンプル1)。「Animated Buttons」の表現を参考にした。例によって、HTMLとCSSの構成はわかりやすく改め、コードも絞り込んである。
ボタンの静的なデザイン
<body>
要素に書くコードは以下のように構成した。各ボタンを<a>
要素(class
属性"btn")として<div>
要素(class
属性"container")の中に納めた。ボタンの<a>
要素は、それぞれ3つの<span>
要素(class
属性"btn-text"と"btn-slide-text"および"btn-icon")をパーツとして含んでいる(図1)。3つめの<span>
要素の中には、さらに空の<span>
要素が加えてあり、CSSで矢印を背景画像として与える。
この<body>
要素の記述に対して、つぎのような<style>
要素を与える。各ボタンはすべてが表示され、まだアニメーションもマウスインタラクションもない(前掲図1)。なお、CSSにベンダープレフィックスを付けなくて済むように、<script>
要素で-prefix-freeを読み込んでいる(第1回の「ベンダープレフィックスと-prefix-free」の項参照)。また、Google FontsのOswaldを使った(第5回の「Google Fontsと回り込みの解除」参照)。
ボタンの凹凸の表現
アニメーションに取りかかる前に、前掲CSSで定めた、ボタンの凹凸の表現の仕方について確かめておく。グラデーションとボーダーおよびシャドウを組み合わせて立体風に見せている(図2)。
まず、ボタン全体の<a>
要素(class
属性"btn")は、background
プロパティに定めたlinear-gradient()
関数で背景を線形のグラデーションで塗るとともに、border
プロパティにより外枠を与えた(第2回の「メニューに角の丸みと影を加える」参照)。また、border-radius
プロパティが角を丸くしている。そして、box-shadow
プロパティの構文はつぎのとおりだ。普通に影をつけるだけでなく、inset
キーワードで内側に光や影を加えれば、凹凸が表せる(第1回の「影でボタンを立体的に見せる」参照)。さらに、ぼけ幅を0にすることで、ボーダーのような縁をつけることも可能だ。
ボタン全体(class
属性"btn")は、内側上部に白を与えて膨らみを表した。そして、右下の影に加え、グレーで太めの縁を加えた。2番目のパーツ(class
属性"btn-slide-text")の左端には白を与えることで初めのパーツを膨らませ、内側左上の影で凹みを表している。3番目のパーツ(class
属性"btn-icon")は内側左端に白を与えて膨らませた。さらに、border-left
プロパティで左のパーツ右端に凹みを加えた。
ボタンにポインタを重ねたら追加情報を示す
ボタンの追加情報を初めは隠しておき、マウスポインタを重ねたら表示しよう。まず、ボタン全体の要素(class
属性"btn")の幅は、padding-right
プロパティで初めは縮めておき、マウスポインタが重なったら:hover
擬似クラスでもとに戻す。つぎに、追加情報の要素(class
属性"btn-slide-text")はwidth
プロパティの値を初めは0とし、やはりマウスポインタが重なったときに戻せばよい。これでマウスポインタを重ねたボタンの追加情報が示される。
アニメーションに効果を加える
ボタンのアニメーションにもう少し効果を加えよう。ボタン全体の要素(class
属性"btn")には、transition
プロパティを定める。タイミング関数は、変化が一定のlinear
を用いた。また、マウスポインタを重ねたとき(:hover
)、box-shadow
プロパティで加えた太い縁は外している。そして、3番目のパーツ(class属性"btn-icon")の中の矢印の背景画像を与えたspan
要素は、半透明にしてあったopacity
プロパティの値を1にした。これで、ボタンにマウスポインタを重ねると、効果のともなったアニメーションで追加情報が示される(図3)。ここまでのCSSの定めを以下のコード1にまとめた。
ボタンのパーツのアニメーションを仕上げる
前傾コード1のアニメーションはまだ不完全だ。ボタンはアニメーションで幅が広がるのに、追加情報の幅はただちに変わるのでボタンのテキストに重なってしまう(図4)。そこで、以下に抜き書きしたCSSのように、ボタンの中の3つの要素(class属性"btn-text"と"btn-slide-text"および"btn-icon")にも、transition
プロパティを定める。また、ボタンにマウスポインタを重ねたとき、テキストと影その影の色を変えた。さらに、ボタンを押した場合(:active
擬似クラス)のスタイルも新たに加える。これで、マウスポインタを重ねると細かな効果の加わったアニメーションで追加情報が示されるボタンのできあがりだ。CSSの定めと合わせて<body>
要素の記述も、以下のコード2にまとめた。