篤姫のボタン - とみの印刷

ボタン画像がひとつですむ方法
a:link
a:hovor
a:visitedの背景位置を、垂直方向に上中下で指定

http://webftp.athuman.com/~haa170245/0107button.html

html

<html>
<head>
<link href="cssファイル名" rel="stylesheet" type="text/css" />
</head>
<body>
<h3><a href="#">ボタンの名前</a></h3>
</body>
</html>

CSS

h3 a{
	display: block;
	text-indent: -999px;（禁断の…）
	height: 30px;　（画像の大きさ）
	width: 180px;
}
h3 a:link {
	background-image: url(画像のありか);
	background-position: 0px top;（←ココ！画像の上部表示）
	display: block;
	background-repeat: no-repeat;
}
h3 a:hover {
	background-image: url(画像のありか);
	background-position: 0px center;（←中央表示）
	display: block;
	background-repeat: no-repeat;
}
h3 a:visited {
	background-image: url(画像のありか);
	background-position: 0px bottom;（←下部表示）
	display: block;
	background-repeat: no-repeat;
}