立体的なボタンを作ってみる

#立体的なボタンを作る
<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;
}