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

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

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




1

<a>タグでのCSSボタン

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

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; /*ボタン色*/
}

2

<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; /*ボタン色*/
}

3

立体的なCSSボタン

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

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);
}




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


codropsでのCSSボタンのチュートリアル2点と、簡単に設置できるCSSライブラリ。コードコミュニティサイトCodepenで公開しているCSSボタンのホバーエフェクトのアイデアから気になったデザインをピックアップしました。

1

Creative Button Styles

codropsで公開されている、モダンなCSSボタンのアイデア。2013年に公開された記事ですが、今なおキレイなボタン・ホバーエフェクトが多い。

2

Button Styles Inspiration

こちらもcodropsで公開されているボタンスタイルのチュートリアル。テキストエフェクトやアイコンをうまく利用した魅力的なホバーエフェクトが多い。

3

Hover.css

CSSボタンに手軽にhoverエフェクトを実装することができる有名なCSSライブラリ。ライセンスはMIT。

4

bttn.css

13種類・4サイズから選択できるCSSライブラリ。

5

Buttons

フラットタイプから立体的なボタンまで揃ったCSSライブラリ。

6

CodePen – CSSボタンのアイデア



Colorful CSS Buttons

ボーダーをうまく使用したカラフルなCSSボタン

See the Pen Colorful CSS Buttons by Chris Deacy (@chrisdothtml) on CodePen.

Animated CSS3 Buttons

ラインやストライプを使った16種類のCSSボタン

See the Pen Animated CSS3 Buttons by Sazzad (@sazzad) on CodePen.

20 Button Hover Effects

ベーシックなものからフラップ・シャドーまで実用的なスタイルのCSSボタン

See the Pen 20 Button Hover Effects by Rosa (@RRoberts) on CodePen.

Six Pure CSS Button Hover Animations

ボーダーと背景を入れ替えるアニメーションのCSSボタン

See the Pen Six Pure CSS Button Hover Animations by Christian (@CTNieves) on CodePen.

Collection of Button Hover Effects

ホバーエフェクトに工夫を凝らしたCSSボタン

See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.

Gradient hover animated button

アウトラインがアンダーラインに変化するキレイなCSSボタン

See the Pen Gradient hover animated button | Welcome in my world by Marcel Pirnay (@mars2601) on CodePen.

Amy Winehouse Doc Button

ブロックが左右にスライドするクールなCSSボタン

See the Pen Amy Winehouse Doc Button by Eric Grucza (@egrucza) on CodePen.

Blobs button

液状の背景が浮き上がっていくポップなCSSボタン

See the Pen Blobs button by Nikolay Talanov (@suez) on CodePen.

Rotating Icon Buttons

45度回転するアイコンを使用した印象的なCSSボタン

See the Pen Rotating Icon Buttons by Cole Waldrip (@colewaldrip) on CodePen.

Twitter Button Concept

立体的にフォローボタンを出現させるアイデア

See the Pen Twitter Button Concept by Erik Deiner by fatihmusal (@fatihmusal) on CodePen.

そのほかに、Webサイト上で手軽にCSSボタンを作成できるジェネレーターもありますので合わせてチェック↓してみてください。