新たに始まった連載
ボタンのもとになる静的スタイル
まず，<body>要素に書くコードだ。プッシュボタンにする<a>要素は，class属性"button"を定めた<p>要素に含める。それをさらに，class属性"container"の<div>要素で包んだ。
<body>
<div class="container">
<p class="button"><a href="#">Push Button</a></p>
</div>
</body>
プッシュボタンのもととなるスタイル<style>要素で定める。まだ，
図1 プッシュボタンのもととなるスタイル
<style>
body {
background: white;
font: 30px sans-serif;
}
.button a {
display: block;
width: 200px;
margin: 0 auto;
padding: 10px;
color: white;
text-align: center;
text-decoration: none;
background-color: lightseagreen;
}
</style>
ボタンの角に丸みを加える
ボタンらしく，border-radiusだ。プロパティの値には，
border-radius: 角丸の半径
プッシュボタンclass属性"button"）<a>要素に，
.button a {
border-radius: 5px;
}
図2 プッシュボタンの角に丸みを加えた
影でボタンを立体的に見せる
さらに，box-shadowプロパティでボタンに影を加えたい。オプションinsetは後で用いる。水平・
box-shadow: [inset] 水平のずれ 垂直のずれ ぼけ幅 カラー
プッシュボタンclass属性"button"）<a>要素には，rgba()関数で半透明にしている。
.button a {
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
}
図3 プッシュボタン外側の右下に影が加わった
box-shadowプロパティには，insetを与えると，
.button a {
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
inset -4px -4px 4px rgba(0, 0, 0, 0.4);
}
図4 プッシュボタン内側の左上に白と右下に黒の影が加わった
プッシュボタンの外側右下の影も加えた<style>要素の記述はつぎのとおりだ。これで，
body {
background: white;
font: 30px sans-serif;
}
.button a {
display: block;
width: 200px;
margin: 0 auto;
padding: 10px;
color: white;
text-align: center;
text-decoration: none;
background-color: lightseagreen;
border-radius: 5px;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
inset -4px -4px 4px rgba(0, 0, 0, 0.4),
4px 4px 8px rgba(0, 0, 0, 0.6);
}
図5 出っ張ったプッシュボタンの右下に影を加えた表現
