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/





  • anime.jsを使用したテキストエフェクト集「Moving Letters」
  • サイトで使用していないCSSセレクタを調べられる「Unused CSS」
  • 様々なスニペットがまとめられたサイト「LittleSnippets.net」
  • イメージを見ながら学べるCSS GRIDのチートシート「GRID」
  • 【CSS】色々と使える疑似クラス:nth-child()の実用例
RELATED POSTS
  • Web制作に役立つChromeおすすめの拡張機能11選
  • 魅力的なテキストエフェクトを実装できる「Blotter.js」
  • 【jQuery】要素を３D回転させるプラグインTURNBOX.js
  • CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
  • CSSで出力できるドット絵ジェネレーター「Pixel Art to CSS」
  • Webサイト・スマホアプリなどのUIデザインギャラリー「UIPatternHub」
RECENT POSTS
  • バナーデザイン制作で参考になるバナー広告ギャラリーサイト12選
  • 【2021年版】 WordPressのおすすめテーマ17選（無料版/有料版）
  • 【2021年版】 無料で使えるフリー画像・写真素材サイト27選（国内/海外）
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
POPULAR POSTS
  • 【2021年版】 無料で使えるフリーイラスト素材サイト33選（商用利用可）
  • 【無料】漢字が使える日本語フリーフォント70選
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • フォントを調べる時に役に立つツール・サイト10選
  • 無料で使える日本語・英語のかわいいフリーフォント20選