CSSの基本（17）

リンクをボタンの様に見せる指定方法(Ｔ)

リンクを画像ボタンを使わずにボタンのように見せる事が、
ＣＳＳで指定することが出来ます。
ここでは、ボタンをセンターで縦に並べています。

ボタンの様に見せる（凸型）　⇒　border: outset (色名） 4px;
ボタンの様に見せる（凹型）　⇒　border: inset (色名） 4px;

<HTML>
<HEAD>
<style type="text/css">
<!--

a {
border:outset #33cc66 4px; 　　　　 　/* 枠線の内側が凸に見える・デザイン・色・線の太さ */
background-color:#339933;　　　　　 　/* ボタンの表面の色 */
color:white; 　　　　　　　　　　　　 　　　　/* ボタンの文字色 */
padding:0.5em; 　　　　　　　　　　　 　　　/* ボタンの文字と枠線までの距離 */
display:block; 　　　　　　　　　　　 　　　　/* 全てのボタンをブロックレベルにする */
width:7em; 　　　　　　　　　　　　　 　　 　/* 横幅を全角７文字分にする */
float:center; 　　　　　　　　　　　　 　　　/* センターに表示する */
}
a:hover {
border:inset #33cc66 4px; 　　　　　　/* 枠線の内側が凹に見える・デザイン・色・線の太さ */
}

--></style>
</head>
<body>
<center>
<h1>リンクをボタンの様に見せる</h1>
</center>
<P><BR>
<BR>
</P>

<CENTER>
<A href="http://www47.tok2.com/home/donbey/preview16.htm" target="_self">紙の豆知識</A>
<A href="http://www47.tok2.com/home/donbey/preview28.htm" target="_self">プロフィール</A>
<A href="http://www47.tok2.com/home/donbey/preview31.htm" target="_self">リンク</A>
<A href="http://www47.tok2.com/home/donbey/preview33.htm" target="_self">ご意見箱</A>
</CENTER>
</body>
</HTML>


（画面クリックでWEB上のサイズを見てください。）