リンクテキストを スタイルシートで ボタンに♪-メルマガ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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です