cssでつくるボタンデザイン | 25egg

基本的なボックスタイプのリンクボタンにどんどんcssを追加していきます。

確認環境Chorme54,Safari9

ボタン

HTML

<a href="#" class="btn">ボタン</a>

CSS

.btn{
	width: 20%;
	padding: 10px;
	background: #405dca;
	color: #fff;
	text-align: center;
	display: block;
	text-decoration: none;
}
.btn:hover{
	text-decoration: none;
	background: #364ea5;
}

その1:角丸ボタン

角丸5px。フラットなデザインに使うならこれだけでもボタンっぽく見えます。

ボタン

HTML

<a href="#" class="btn btn1">ボタン</a>

CSS

.btn1{
	border-radius: 5px;
}

その2:グラデーションボタン

先ほどの角丸とグラデーションをいれてみました。

gradientは各ブラウザ対応が微妙なので、ベンダープレフィックスいれてます。

ボタン

HTML

<a href="#" class="btn btn2">ボタン</a>

CSS

.btn2{
	border-radius: 5px;
	border: 1px solid #364ea5;
	background: -moz-linear-gradient(
		top,
		#5470dc 0%,
		#415dcb 100%);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#5470dc),
		to(#415dcb));
	background:linear-gradient(
		top,
		#5470dc 0%,
		#415dcb 100%);
}

その3:立体感のあるボタン

グラデーションは使ってないですが、ボタンの影のところに明るめのラインいれてるのがポイントです。

ボタン

HTML

<a href="#" class="btn btn3">ボタン</a>

CSS

.btn3{
	margin: 0 0 5px 0;
	display: inline-block;
	border-radius: 5px;
	box-shadow: 0 5px #364ea5;
	border-bottom: 1px solid #627ce3;
	}
.btn3:hover{
	margin: 5px 0 0 0;
	box-shadow:none;
}
<< ブログ記事にもどる