CSS3だけで丸いボタンを作る方法 - CSS3で遊んでみる

カテゴリ：CSS3関連 2009年12月12日 00:04

最近なんだか結構 CSS3 で色々やっているのが流行ってるようなので、自分も CSS3 で遊んでみることにしました。内容は、「CSS3だけで丸いボタンを作る」です。

画像を見てもらうと分かるように、完全に丸いボタンです。
しかもこれ、画像は一切使っていません。使用しているのは CSS のみです。

今回はとにかく遊んでみる、っていうのが主題なので使いどころとかは一切考えていませんｗ
それから CSS3 に対応していないブラウザで見ると、ただの真四角のボタンリンクになります。

デモ

http://css-eblog.com/eblog_sample/0912/radial-button/

ダウンロード

http://css-eblog.com/eblog_sample/0912/radial-button/radial-button.zip

▼EntryMore▼

HTML ソース

CSS ソース

a.radialBtn {
	/* CSS3を使っているところ */
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	background-image: -moz-linear-gradient(-90deg,rgba(255,255,255,0.9),rgba(255,255,255,0));
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(255,255,255,0.9)), color-stop(1,rgba(255,255,255,0)));
	text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
	-webkit-transition: background-color, .5s;
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.6);
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.6);
	/* ここまで */

color: #333;
	display: block;
	text-decoration: none;
	text-align: center;
	line-height: 80px;
	width: 80px;
	height: 80px;
}
	a.radialBtn:hover {
		background-color: orange;
		color: #333;
	}
a.btn1 {
	background-color: #e00;
	border: solid 1px #933;
}
a.btn2 {
	background-color: #3b5;
	border: solid 1px #141;
}
a.btn3 {
	background-color: #25e;
	border: solid 1px #114;
}
a.btn4 {
	background-color: #ffd300;
	border: solid 1px #750;
}
a.btn5 {
	background-color: #ddd;
	border: solid 1px #777;
}