新たに始まった連載
ボタンのもとになる静的スタイル
まず,<body>
要素に書くコードだ。プッシュボタンにする<a>
要素は,class
属性"button"を定めた<p>
要素に含める。それをさらに,class
属性"container"の<div>
要素で包んだ。
<body>
<div class="container">
<p class="button"><a href="#">Push Button</a></p>
</div>
</body>
プッシュボタンのもととなるスタイル<style>
要素で定める。まだ,
<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;
}
影でボタンを立体的に見せる
さらに,box-shadow
プロパティでボタンに影を加えたい。オプションinset
は後で用いる。水平・
box-shadow: [inset] 水平のずれ 垂直のずれ ぼけ幅 カラー
プッシュボタンclass
属性"button")<a>
要素には,rgba()
関数で半透明にしている。
.button a {
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
}
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);
}
プッシュボタンの外側右下の影も加えた<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);
}