|
 |
|
押したらへこむリンクボタン
サンプルと機能
リンクボタンをスタイルシートのみで実現します。
→ サンプル
HOME
掲示板
プロフィール
リンク
Mail
サイトマップ
サンプル・ソース
緑の文字が変更箇所で、赤い文字が対応するスクリプトです。
"//"以下はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
→ サンプル（上の３つのボタンの場合）
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
<!--
A.btn {
display: block;
/* ブロック要素にする */
width: 80px; /*
横幅 */
color: #ffffff;
background-color: #666699; /* 背景色 */
border: outset 2px #9999cc; /* 枠の色 */
margin: 0px;
padding: 3px 1px 1px 0px;
font-size: 12px; /*
フォントサイズ */
line-height: 12px; /* 行の高さ */
text-align: center; /* 水平揃え */
text-decoration: none; /* 下線を消す */
}
A.btn:hover {
color: #eeeeee;
background-color: #555588; /* 背景色 */
border: inset 2px #9999cc; /* 枠の色 */
margin: 0px;
padding: 4px 0px 0px 1px;
}
A.btn:active { color: #ffffff; }
A.btn:visited { color: #ffffff; }
-->
</STYLE>
</HEAD>
<BODY bgcolor="#ffffff">
<TABLE border="0" cellspacing="0" cellpadding="0" width="300">
<TR>
<TD><A href="#" class="btn">BACK</A></TD>
<TD><A href="#" class="btn">HOME</A></TD>
<TD><A href="#" class="btn">NEXT</A></TD>
</TR>
</TABLE>
</BODY>
</HTML> |
解説・注意点など
スタイルシートで、"border"のスタイルを
"outset"から"inset"に変えることで実現しています。
しかし、これだけでは文字は動かないので
"padding"(余白)をうまく変えることで、文字を右下に動かすようにします。
それ以外のスタイルシートはデザインを変えるものなので、
いろいろとアレンジしてみてください。
ただし、"line-height"や"text-align"などを変えた場合は、
うまく動かなくなることがありますので、
その場合は適当に"padding"を調整してみて下さい。
スタイルシートについて、詳しくはこちらをご覧ください。
← Webデザインテクニックに戻る
|
|
|
