「spanタグを画像不使用のCSSだけでボタンのようなアイコン」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

spanタグを画像不使用のCSSだけでボタンのようなアイコン

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>spanタグを画像不使用のCSSだけでボタンのようなアイコン</title>
</head>
<body>
<h1>spanタグを画像不使用のCSSだけでボタンのようなアイコン</h1>
<style type="text/css">
.btnIcn{
margin:0 2px 0 0;
padding:2px 4px;
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);
}
.btnIcn{
-moz-border-radius: .3em;
border-radius: .3em;
}
/* ボタンの色 */
.btnIcn{
color: #333;
background: #f0f0f0;
background: -moz-linear-gradient(#e2e2e2, #f0f0f0); /* Firefox */
background: -o-linear-gradient(#e2e2e2, #f0f0f0); /* Opera */
background: -webkit-linear-gradient(#e2e2e2, #f0f0f0); /* Chrome,Safari */
background: linear-gradient(#e2e2e2, #f0f0f0);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e2e2e2', endColorstr='#f0f0f0');
}
</style>
<div style="border:1px solid #ccc; background:#ffeeff;padding:5px;width:200px;">
<span class="btnIcn" href="#">てすと1</span>
<span class="btnIcn" href="#">てすとてすと2</span>
<span class="btnIcn" href="#">てすとてすとてすと3</span>
<span class="btnIcn" href="#">てすとてすとてすとてすと4</span>
<span class="btnIcn" href="#">てすと5</span>
<span class="btnIcn" href="#">てすとてすとてすと6</span>
<span class="btnIcn" href="#">てすと7</span>
<span class="btnIcn" href="#">てすとてすと8</span>
</div>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>