リンクテキストを スタイルシートで ボタンに♪-メルマガ1

リンクテキストを
スタイルシートでボタンに♪

【利点】

画像より軽い！

こんなボタンに♪

• フラットデザインでちょっと立体
• ホバー時にちょっと明るく
• ボタンを押したことがわかるカンジ

↓サンプルコード↓
動作を分かりやすくするため
大げさなデザイン☆彡

<style>
.btn {
background-color: red;
box-shadow: 0 0.3em black;
color: white;
display: inline-block;
position: relative;
}
.btn:hover{
background-color: pink;
}
.btn:active{
box-shadow: none;
top: 0.3em;
}
</style>
<a class=”btn” href=”#”>ボタン</a>
↑sample.html で保存↑

【　ポイント　】

・box-shadow で立体表現
・position で動きを表現

【　.btn 解説　】

box-shadow でできる影を
真下につけることで立体表現

値は
水平方向： 0
垂直方向： 0.3em（下に影）
色：　黒

display: inline-block;

テキストを単語あつかいに

無いと
ボタンが途中で改行される（笑）。

position: relative;

相対配置
ボタンを動く状態に♪

【　.btn:hover 解説　】

:hover　擬似クラス

カーソルが乗った時の
スタイルを指定

【　.btn:active 解説　】

:active 擬似クラス

クリック中のスタイルを指定

box-shadow: none;

ボックスシャドウを無効化
押されて見えなくなったカンジ

top: 0.3em;

.btn クラスの box-shadow
垂直方向の値に合わせることで
ボタンを押下した感を演出

～～～～～～～～～～
てことで
ボタンの大枠が完成

あとは
サイトに合う色、
クリック感を

width, height で
ボタンサイズ

それに合わせ
テキストの装飾など

：編集後記：

ボタンといえば
卒業式後も制服に
全部残ってた。

orz