角丸のボタン画像とHTMLとCSSを生成してくれるジェネレーター「iWeb Tools Online」

iweb0905221.jpg

角丸のボタン画像とHTMLとCSSを生成してくれるジェネレーター「iWeb Tools Online」の紹介です。

適当に色を選択して、「Generate」ボタンを押して、「Download css and images」のリンクをクリックするだけです。

下記が生成したボタン画像。

iweb0905222.jpg

HTMLとCSSは以下のようになっています。

HTML

<button class="rounded">
  <span>Save</span>
</button>

CSS

button {
	border: 0 none;
	cursor: pointer;
	font-weight: bold;
	padding: 0 15px 0 0;
	text-align: center;
	height: 30px;
	line-height: 30px;
	width: auto;
}

button.rounded {
	background: transparent url( btn_right.png ) no-repeat scroll right top;
	clear: left;
	font-size: 0.8em;
}

button span {
	display: block;
	padding: 0 0 0 15px;
	position: relative;
	white-space: nowrap;
	height: 30px;
	line-height: 30px;
}

button.rounded span {
	background: transparent url( btn_left.png ) no-repeat scroll left top;
	color: #FFFFFF;
}

button.rounded:hover {
	background-position: 100% -30px;
}

button.rounded:hover span {
	background-position: 0% -30px;
}

button::-moz-focus-inner {
	border: none;
}