webclips

CSSで実装するボタンデザインとホバーエフェクトのアイデア

2018/06/11

ボタンを画像で作る時代が懐かしい…。様々な解像度(PC/タブレット)に対応するようCSSでボタンを作るのが主流となり、チュートリアルや簡単に設置できるCSSライブラリも増えてきました。今回は CSSのみで実装できるCSSボタンデザインの基本的な作り方と、忘備録もかねてCSSボタンを作る上で役立つサイトを紹介します。

目　次

基本的なCSSボタンの作り方

<a>タグでのCSSボタン
<input>タイプのCSSボタン
立体的なCSSボタン

CSSボタンの制作で役立つサイト

Creative Button Styles
Button Styles Inspiration
Hover.css
bttn.css
Buttons
CodePen – CSSボタンのアイデア

基本的なCSSボタンの作り方

<a>タグでのCSSボタン

aタグをブロック要素にしたシンプルなCSSボタンのデザイン例。マウスオーバー:hoverでボタンの背景色を変化させ、変移をスムーズ(なめらか)にアニメーションさせるようにtransitionを設定しました。

CSSボタン

html

<a class="button01" href="#">Button</a>

CSS

.button01{
	display:block;
	width: 250px;
	height:70px;
	line-height: 70px;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	background-color: #f39800; /*ボタン色*/
	border-radius: 5px; /*角丸*/
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
.button01:hover{
	background-color: #f9c500; /*ボタン色*/
}

<input>タイプのCSSボタン

フォームで使われるボタンsubmitbuttonのCSSも大体同じ設定。フォームのボタンはボーダーが残るのでborder: none;としてボーダーを消します。

html

<input type="submit" class="button02" value="CSSボタン">

CSS

.button02{
	display:block;
	width: 250px;
	height:70px;
	line-height: 70px;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	background-color: #f39800; /*ボタン色*/
	border-radius: 5px; /*角丸*/
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
.button02:hover{
	background-color: #f9c500; /*ボタン色*/
}

立体的なCSSボタン

よくみられるフラットでありながら立体感のあるCSSボタン。クリック(ボタンを押しこむ):active表現を加えたデザイン。

CSSボタン

html

<a class="button03" href="#">Button</a>

CSS

.button03{
	display:block;
	width: 250px;
	height:70px;
	line-height: 70px;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	background-color: #f39800; /*ボタン色*/
	border-bottom: solid 6px #ec6c00; /*下線色*/
	border-radius: 5px; /*角丸*/
}
.button03:hover{
	background-color: #f9c500;/*ボタン色*/
	border-bottom: solid 6px #f39800; /*下線色*/
}
.button03:active {
	margin-top: 6px;
	border-bottom: none;
	-webkit-transform: translateY(6px);　/*下移動*/
	transform: translateY(6px);
}