リンクをボタンの様に見せる



紙の豆知識 プロフィール リンク ご意見箱

このページのソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>スタイルシート覚書</title>
<style type="text/css">
<!--

body {color:#660000;
background-color:#ffffee;
margin-left: auto;
margin-right: auto;
}

h1 　　　　　　　{font-style:40px;
　　　　　　　　　font-family:'Comic Sans MS';
color:#993333;
}

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>