コニファ・ロゴ

ツール集:横サイズ可変ボタン(1)

左右の部分に分けた背景画像を使用したタイプ

● 13px全角2文字から21文字の例(最大文字数全角21文字)
文字5文字文字 9文字9文字9文字 21文字21文字21文字21文字21文字2

● 使用画像


● HTMLソース(9文字の場合)
<a class="kahen-blue" href="#"><span>9文字9文字9文字</span></a>

● 外部CSSソース
a.kahen-blue	{
	background: transparent url(../images/kahen-blue-left.png) no-repeat top left;
	display: block;	float: left;	font-size: 13px;	line-height: 1.2;
	padding-left: 12px; 	text-decoration: none;
	color: #ffffff; 	font-weight: normal;
	}
a.kahen-blue span {
	clear: left;
	background: transparent url(../images/kahen-blue-right.png) no-repeat top right;
	display: block;	padding: 4px 12px 4px 0; 
	}
a.kahen-blue:hover { 
	outline: none;	opacity: 0.6;	filter: alpha(opacity=60);
	-ms-filter:"alpha( opacity=60 )"
	}

● 色を変えたパターン
赤色:class名 "kahen-red"  9文字9文字9文字
緑色:class名 "kahen-green"   16文字16文字16文字16文字

 

戻るボタン