スマートフォンっぽいUIを、JQueryを使わずに作ってみる2

HTML5

先週に引き続きですが、今日はボタンタイプのを再現してみました。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル2</title>
<meta name="viewport" content="width=320px">
<style type="text/css">
a.button_link {
	display:block;
	margin:5px auto;
	width:70%;
	height:50px;
	 -webkit-border-radius:7px;
	text-align:center;	
	text-decoration:none;
	font-size:20px;
	vertical-align:middle;
}

a.button_link span {
	line-height:50px;/*a.button_linkのheightと同じ値にしないとvertical-alignが効かなくなる*/
	vertical-align:middle;
	text-shadow: gray 0px -1px 1px;
	font-weight:bold;
}

.yellow {
	background: -webkit-gradient(linear, left top, left bottom, from(#ffff99),  color-stop(0.50, #ffff99), color-stop(0.51, #ffd700), to(#ffd700));
	border: solid 3px #ffd700;
}

a.yellow span {
	color:gray;
	text-shadow: white 0px -1px 1px;
}
</style>
<body>

<a class="button_link yellow" href="hoge.html">
	<span>ボタン1</span>
</a>

</body>
</html>

CSSでグラデーション

CSS3 グラデーション（gradient）の指定方法

↑あたりを参考にして、グラデーション部分のCSSを自分でカスタマイズするといい感じのボタンが作れるます！

色だけを別クラスにしてるのがポイントすね。

borderを太くする

Androidの一部端末で、radiusの角度を付け過ぎると、どーしても角がボケてしまうようなので、borderの太さを太くして隠すのがポイントだったりします。

デザイン上、どーしても線を細くしたい場合は、画像にするしかないと思われます。CSSでやるよりも読み込みが少し重くなっちゃいますが、現時点ではどうしようもなさそうです。

解決方法をご存じの方がいたらお教えいただければ幸いです。