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

　
様々な解像度(PC/タブレット)に対応するようCSSのみでボタンを作るのが主流となり、チュートリアルや簡単に設置できるCSSライブラリも増えてきました。今回は CSSのみで実装できるCSSボタンデザインの基本的な作り方と、CSSボタンを作る上で役立つサイトを紹介します。また、CodePenで公開されている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);
}


4

アイコンフォントを使用したCSSボタン

③のボタンにアイコンフォント「FontAwesome」をテキスト文頭に配置したCSSボタン。簡単にCSSのみでデザインされたボタンを作成できます。

FontAwesomeが発行しているCSSをhead内にリンクを貼ります。後は使用したいアイコンをFontAwesomeで検索して、コード<i class="fas fa-chevron-circle-right"></i>を文頭にコピペするだけです。

html
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
html
<a class="button04" ><i class="fas fa-chevron-circle-right"></i> CSSボタン</a>
CSS
.button04{
	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; /*角丸*/
}
.button04:hover{
	background-color: #f9c500;/*ボタン色*/
	border-bottom: solid 6px #f39800; /*下線色*/
}
.button04:active {
	margin-top: 6px;
	border-bottom: none;
	-webkit-transform: translateY(6px);　/*下移動*/
	transform: translateY(6px);
}

FontAwesomeの使い方については↓の記事をご覧ください。

アイコンフォント「FontAwesome」の使い方

design.webclips.jp/font-awesome/




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


チュートリアルやライブラリなどでCSSボタンも設置することができます。ここでは、codropsでのCSSボタンのチュートリアル2点と、簡単に設置できる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

BUTTONS

6タイプ・6色のフラットから立体的なボタンまで設置できるライブラリ。Font Awesomeを読み込むことでアイコン付きボタンも比較的簡単に設置できます。

7

Pushy Buttons

4サイズ・3色の立体的なシンプルなCSSボタンを設置できるライブラリ。



CSSボタン制作のアイデア


コードコミュニティサイトCodepenで公開しているCSSボタンのホバーエフェクトのアイデアから気になったデザインをピックアップしました。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.



CSS3 Social buttons vol.1

5タイプのバリエーションのホバーエフェクトのアイデア

See the Pen CSS3 Social buttons vol.1 by fox_hover (@fox_hover) on CodePen.



Gradient Buttons with Background-Color Change

グラデーションに変化をつけたホバーエフェクトのアイデア

See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.



Pressable CSS Buttons

立体感のある様々な形状のCSSボタン

See the Pen Pressable CSS Buttons by Joshua Hibbert (@joshnh) on CodePen.

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

コピペするだけで使えるCSSボタンジェネレーターまとめ

design.webclips.jp/css-button-generator/





RELATED POSTS
  • 背景にスクロールアニメーションを実装できる「Physics-Based Background Scroll Effects」
  • 【jQuery】ページめくり効果を付けられる「OneBook3d」
  • 複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
  • ギザギザボーダーを作れるジェネレーター「CSS Jagged Border Generator」
  • 【CSS】スターウォーズのイントロを表現できるライブラリ「starwarsintro.css」
  • CSSとJavaScriptで実装できるメニューをまとめた「110 CSS Menu」
PICKUP
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい！フォントを調べる時に役に立つツール・サイト10選
  • 長いURLを短くする短縮URLサービス8選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
RECENT POSTS
  • 似たフォントを探したい！フォントを調べる時に役に立つツール・サイト10選
  • Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」
  • Web制作に役立つ素材をダウンロードできる「Freebies.ByPeople」
  • アイソメトリックなイラストを作成できるオンラインツール「Explore Isobuild」
  • Googleのプログラミング学習ツール「Grasshopper」にデスクトップ版がリリース
TAG LIST

  • Webサービス

    84

  • CSS

    58

  • jQuery

    34

  • 素材

    30

  • エフェクト

    29

  • ジェネレーター

    25

  • JavaScript

    23

MORE