分123今回のお題は,アニメーションするボタンだ。マウスポインタを重ねると追加情報が現れる(サンプル1⁠)⁠。Buttons」の表現を参考にした。例によって,HTMLとCSSの構成はわかりやすく改め,コードも絞り込んである。buttonsボタンの静的なデザイン<body>要素に書くコードは以下のように構成した。各ボタンを<a>要素(class属性"btn")として<div>要素(class属性"container")の中に納めた。ボタンの<a>要素は,それぞれ3つの<span>要素(class属性"btn-text"と"btn-slide-text"および"btn-icon")をパーツとして含んでいる(図1⁠)⁠。3つめの<span>要素の中には,さらに空の<span>要素が加えてあり,CSSで矢印を背景画像として与える。</a></div>この<body>要素の記述に対して,つぎのような<style>要素を与える。各ボタンはすべてが表示され,まだアニメーションもマウスインタラクションもない(前掲図1⁠)⁠。CSSにベンダープレフィックスを付けなくて済むように,<script>要素で-prefix-freeを読み込んでいる(第1回の「ベンダープレフィックスと-prefix-free」の項参照⁠)⁠。Fontsと回り込みの解除」参照⁠)⁠。