Aタグ（リンク）を画像不使用のCSSだけでボタンの確認とソース出力

「#ffcc00」ってな感じで#から始まる6ケタの色コードを入力

文字色
背景色のベース
透明度（0で白、0.5で半透明、1で背景色）

※右のColorPickerのカラーコードを参考。
※入力すればリアルタイムに下のCSS部を書き換えます。

サンプル

フォントサイズ変更無し（10px）

てすと1 てすとてすと2 てすとてすとてすと3 てすとてすとてすとてすと4 てすと5 てすとてすとてすと6

フォントサイズ：12px

てすと1 てすとてすと2 てすとてすとてすと3 てすとてすとてすとてすと4 てすと5 てすとてすとてすと6

CSS(class=btnCol)：ボタンの配色部分

CSS(class=btnLnk)：ボタンのベースになる部分

a.btnLnk{
	margin:0 2px 0 0;
	padding:2px 4px;
	white-space:nowrap;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	font-family:"ＭＳ ゴシック", "Osaka";
	font-size:10px;

	border: 1px solid #9c9c9c; /* Fallback style */

	box-shadow: 0 0 .05em rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 .05em rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.2);
}

a.btnLnk{
	-moz-border-radius: .3em;
	border-radius: .3em;
}

a.btnLnk:hover{
	box-shadow: 0 0 .1em rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 .1em rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.2);
}

a.btnLnk:active{
	position: relative;
	top: 1px;
}

htmlの基本

<a class="btnLnk btnCol" href="#">てすと1</a>