立体的なボタンを作る
<a>タグで立体的なボタンを作ってみます。
ボタンに影をつけることによって、立体的に見えるようにします。
また、ボタンにカーソルを当てた時の、カーソルの形も変更してみます。
影をつける
ボックスに影を付けるためにはbox-shadowプロパティを用います。
「影の位置」と「影の色」を指定します。
style.css
.box {
box-shadow: 10px 10px #000000; /* 水平方向 垂直方向 色 */
}
垂直方向のみつけると立体っぽくなる
style.css
.btn {
box-shadow: 0px 6px #000000;
}
cursor
cursorプロパティを用いることでマウスのカーソルが要素に乗ったときのカーソルの形を変えることができます。
タグによってcursorが初期状態で設定されているものもあり、例えば<a>タグは初期状態でpointerが設定されています。
style.css
.box {
cursor: pointer; /* text, pointer, default */
}
ボタンを押したらへこむようにする
ボタンを押したときに以下の処理をすると、へこんで見えるようになります。
・影を消す
・ボタンの位置を影の分だけ下げる
active
セレクタにactiveを用いることで、要素がクリックされている間だけCSSを適用することができます。
セレクタ:activeというように指定します。
style.css
div:active {
background-color: red;
}
CSSを打ち消す
box-shadow: none;とすると、影を消すことが出来ます。
このように多くのプロパティはnoneを指定することによって消すことができます。
style.css
.btn:active {
box-shadow: none; /* 影を打ち消し */
}
position: relative;による位置の変更
要素の位置を変更する方法を学びましょう。
前回position: relative;はposition: absolute;の基準位置を決めるために使っていましたが、要素の位置を変更するためにも使うことが出来ます。
position: relative;をtopやleftと併用すると、その要素を本来の位置からずらせます。
style.css
.btn:active {
position: relative;
top: 6px;
left: 10px;
}
ボタンを凹ませる
クリック時に、以下の処理をすることによって、ボタンがへこんで見えるようになります。
・box-shadowをnoneにする
・position: relative;とtopによって影の分だけ位置を下げる
style.css
.btn:active {
position: relative;
top: 6px;
box-shadow: none;
}