CSSで立体ボタン。

webのコト

普通の状態。

クリックすると。

<head>
<title>立体ボタン</title>
<style type="text/css">

a {
	float: left;
	width: 2em;
	padding: 5px;
	border: outset #FF6600 4px;
	font-weight: bold;
	color: #339933;
	text-decoration: none;
	display: block;
	text-align: center;
	background-color: #FF9933;
}


a:hover {
	border: inset #FF6600 4px;
}
</style> 
</head>

<body>
<a href="link1">link1</a>
<a href="link2">link2</a>
<a href="link3">link3</a>
</body>
</html>