現在CSS3を勉強中でふと、グラーデーションと角丸を利用すればCSSだけで一昔前に流行った?アクアボタンを再現できるんじゃないかと思い調べてみました。
※↓こういうやつ（下のは画像です）

調べてみた

自分ができると思ったくらいなんで、すでに作ってる方もいるだろうと思い調べると
ホント素晴らしく見事に作成されてる方がいました。

CSS3 Box-Shadow with Inset Values – The Aqua Button ReReVisited!
上記サイトではCSSのみでとてもキレイなアクアボタンを再現しています。

実践してみた

ただ幅を固定していると使いづらいかなというのとinput要素でなくa要素のみで作成しようと思い、上記サイトを参考にして自分も実践してみました。

アクアボタンデモ

HTMLソース

<p class="aquaBtn"><a href="#">アクアボタン</a></p>

CSSソース

.aquaBtn a {
	padding: 3px 15px;
	text-align: center;
	position: relative;
	background-color: #348ee0;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.3, rgb(84, 163, 233)), color-stop(0.60, rgb(52, 142, 224)), color-stop(1, rgb(140, 200, 250)));
	background: -moz-linear-gradient(center top, rgb(84, 163, 233) 0%, rgb(52, 142, 224) 60%, rgb(140, 200, 250) 100% );
	border: 2px solid #54a3e9;
	border-radius: 18px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 5px 8px;
	-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 5px 8px;
	text-shadow: rgba(10, 10, 10, 0.5) 1px 1px 1px;
	overflow: hidden;
 }  

.aquaBtn a:before {
	content: "";
	height: 1.05em;
	width: 92%;
	padding: 0px 0;
	margin-left: -46%;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.25);
	background: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
	background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 95%);
}

 .aquaBtn a {
	color: #fff;
	text-decoration: none;
}

.aquaBtn a:hover {
	text-shadow: rgba(255, 255, 255, 0.6) 0px 0px 5px;
 }

ポイントはa：before疑似要素の幅を%指定して、position: absoluteとleft: 50%、margin-left: -46%で光沢部分を中央配置しているところでしょうか…
※マージンの-46%の値は幅92％の半分の値です

%指定なのであまり横長になるとボタンとボタンの光沢部分の幅の差が大きくなってしまいますが、これである程度はボタンの中の文字数が可変しても対応できるようになります。

確認したブラウザはChrome5.0とFirefox3.8です、IEは見る気すら起きません。