FontAwesome Sample

ボタン

ボタンのコピペで使えるFontAwesomeサンプル集です。フォームなどでよく使われるボタンのデザインをご紹介します。シンプルなボタンからおしゃれなボタンまでいろいろなボタンデザインがあります。このページではbuttonタグを使ったサンプルで紹介しています。aタグを使ったボタンサンプルをご覧になりたい場合は、リンクをご覧ください。

アイコンとテキストのボタン

<button class="fas_button_text">登録</button>
.fas_button_text{
	padding: 0;
	line-height: 1;
	background: none;
	border: none;
	color: #3366cc;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_text:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f2bd';
	margin-right: 5px;
}

アイコンとテキストのみのボタンサンプルです。余白・背景・枠線などを入れずにアイコンとテキストのみのリンクのようなボタンです。

フラットなボタン

<button class="fas_button_flat">Button</button>
.fas_button_flat{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #6699cc;
	color: #fff;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_flat:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f058';
	margin-right: 5px;
}

フラットなボタンのサンプルです。背景色のみの非常にシンプルで使いやすいデザインのボタンです。擬似要素の:beforeでアイコンを表示しています。:hoverでマウスオーバー時にカーソルがポインターになる設定もおこなっています。

角丸のボタン

<button class="fas_button_radius">Send</button>
.fas_button_radius{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #6699cc;
	color: #fff;
	border-radius: 5px;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_radius:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f138';
	margin-right: 5px;
}

角丸なボタンのサンプルです。こういった角丸のボタンはいろんなサイトでよく見かけるデザインです。border-radiusで角丸の設定をおこなっています。

両端が丸いボタン

<button class="fas_button_round">実行</button>
.fas_button_round{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #6699cc;
	color: #fff;
	border-radius: 20px;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_round:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f058';
	margin-right: 5px;
}

両端が丸いボタンのサンプルです。border-radiusで高さの半分の角丸にすることで両端を丸くしています。

枠線付きボタン

<button class="fas_button_border">Good</button>
.fas_button_border{
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #fff;
	border: 2px solid #6699cc;
	color: #6699cc;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_border:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f164';
	margin-right: 5px;
}

枠線付きのボタンサンプルです。borderで枠線の種類や色を設定しています。

枠線付きボタン（角丸）

<button class="fas_button_borderradius">Post</button>
.fas_button_borderradius{
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #fff;
	border: 2px solid #6699cc;
	color: #6699cc;
	font-size: 1em;
	border-radius: 5px;
	cursor: pointer;
}
.fas_button_borderradius:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f064';
	margin-right: 5px;
}

角丸が入った枠線付きのボタンサンプルです。border-radiusで角丸の設定を入れています。

枠線付きボタン（両端が丸い）

<button class="fas_button_borderround">Next</button>
.fas_button_borderround{
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #fff;
	border: 2px solid #6699cc;
	color: #6699cc;
	font-size: 1em;
	border-radius: 20px;
	cursor: pointer;
}
.fas_button_borderround:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f35a';
	margin-right: 5px;
}

両端が丸い枠線付きのボタンサンプルです。border-radiusでボタンの高さの半分の角丸を設定することで両端を丸く表現しています。

枠線＋背景色のボタン

<button class="fas_button_borderback">送信</button>
.fas_button_borderback{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #e0ecf9;
	color: #3366cc;
	border: 2px solid #3366cc;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_borderback:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f101';
	margin-right: 5px;
}

枠線＋背景色のボタンサンプルです。背景色をbackgroundで、枠線をborderで設定しています。お好みで背景色や枠線を変更してお使いください。

枠線＋背景色＋角丸のボタン

<button class="fas_button_borderbackradius">お問い合わせ</button>
.fas_button_borderbackradius{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #e0ecf9;
	color: #3366cc;
	border: 2px solid #3366cc;
	font-size: 1em;
	border-radius: 5px;
	cursor: pointer;
}
.fas_button_borderbackradius:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f2b6';
	margin-right: 5px;
}

枠線＋背景色＋角丸のボタンサンプルです。border-radiusで角丸を設定しています。

枠線＋背景色＋両端が丸いボタン

<button class="fas_button_borderbackround">Download</button>
.fas_button_borderbackround{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #e0ecf9;
	color: #3366cc;
	border: 2px solid #3366cc;
	font-size: 1em;
	border-radius: 20px;
	cursor: pointer;
}
.fas_button_borderbackround:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f56d';
	margin-right: 5px;
}

枠線＋背景色＋両端が丸いボタンのサンプルです。border-radiusで角丸をボタンの高さの半分に設定することで両端を丸くしています。

背景が横グラデーションのボタン

<button class="fas_button_gradationhorizon">Upload</button>
.fas_button_gradationhorizon{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #2ac9f9;
	background: -moz-linear-gradient(left, #2ac9f9 0%, #405fed 100%);
	background: -webkit-linear-gradient(left, #2ac9f9 0%, #405fed 100%);
	background: linear-gradient(to right, #2ac9f9 0%, #405fed 100%);
	color: #fff;
	border-radius: 5px;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_gradationhorizon:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f574';
	margin-right: 5px;
}

背景が横グラデーションになっているボタンのサンプルです。linear-gradientで背景をグラデーションにしています。

背景が縦グラデーションのボタン

<button class="fas_button_gradationvertical">Import</button>
.fas_button_gradationvertical{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #2ac9f9;
	background: -moz-linear-gradient(top, #2ac9f9 0%, #405fed 100%);
	background: -webkit-linear-gradient(top, #2ac9f9 0%, #405fed 100%);
	background: linear-gradient(to bottom, #2ac9f9 0%, #405fed 100%);
	color: #fff;
	border-radius: 5px;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_gradationvertical:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f56f';
	margin-right: 5px;
}

背景が縦グラデーションになっているボタンのサンプルです。linear-gradientでto bottomを設定することで縦にグラデーションするように設定しています。

背景が斜めグラデーションのボタン

<button class="fas_button_gradationdiagonal">Export</button>
.fas_button_gradationdiagonal{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #2ac9f9;
	background: -moz-linear-gradient(-45deg, #2ac9f9 0%, #405fed 100%);
	background: -webkit-linear-gradient(-45deg, #2ac9f9 0%, #405fed 100%);
	background: linear-gradient(135deg, #2ac9f9 0%, #405fed 100%);
	color: #fff;
	border-radius: 5px;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_gradationdiagonal:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f56e';
	margin-right: 5px;
}

背景が斜めグラデーションになっているボタンのサンプルです。linear-gradientで135degを設定することで135度の角度でグラデーションするように設定しています。お好みで角度などを変更してお使いください。

丸いボタン

<button class="fas_button_circle"></button>
.fas_button_circle{
	border: none;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background: #6699cc;
	color: #fff;	
	cursor: pointer;
}
.fas_button_circle:before{
	line-height: 50px;
	width: 50px;
	text-align: center;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f011';
	font-size: 30px;
}

アイコンのみの丸いボタンのサンプルです。ボタンタグのサイズを固定化してborder-radiusで高さの半分の円になるように角丸をつけることで丸いボタンにしています。

下線を使って立体感を出したボタン

<button class="fas_button_borderbottom">Delete</button>
.fas_button_borderbottom{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #6699cc;
	color: #fff;
	border-bottom: 4px solid #4a6f94;
	border-radius: 5px;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_borderbottom:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f2ed';
	margin-right: 5px;
}

下線を使って立体感を出したボタンのサンプルです。border-bottomでボタンの下に線を作り、角丸と組み合わせることで立体感を出しています。

立体的な線を付けたボタン

<button class="fas_button_borderoutset">Buy</button>
.fas_button_borderoutset{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #6699cc;
	color: #fff;
	border: 3px outset #75b0eb;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_borderoutset:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f07a';
	margin-right: 5px;
}

立体的に見える線を付けたボタンのサンプルです。border: 〜 outset 〜;を使うことで立体的な線が入る設定にしています。

影を付けたボタン

<button class="fas_button_shadow">Submit</button>
.fas_button_shadow{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #6699cc;
	color: #fff;
	box-shadow: 0 0 5px 0 #999;
	border-radius: 5px;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_shadow:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f00c';
	margin-right: 5px;
}

影を付けたボタンのサンプルです。影はbox-shadowで設定しておりボタン全体に影が付くようにしています。影を付けることで少し浮き出した感じを演出できます。

グラデーション＋内部の影のボタン

<button class="fas_button_gsi">Clear</button>
.fas_button_gsi{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	background: #0046d3;
	background: -moz-linear-gradient(top, #0046d3 0%, #4b86fc 100%);
	background: -webkit-linear-gradient(top, #0046d3 0%, #4b86fc 100%);
	background: linear-gradient(to bottom, #0046d3 0%, #4b86fc 100%);
	color: #fff;
	border: 1px solid #0046d3;
	box-shadow: 2px 2px 2px 0 #4b86fc inset;
	border-radius: 5px;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_gsi:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f057';
	margin-right: 5px;
}

グラデーション＋内部の影で少し立体的を出したボタンのサンプルです。linear-gradientで背景をグラデーション化して、box-shadowで内部の影を付けています。

グラデーション＋内部の影＋外部の影のボタン

<button class="fas_button_gsio">Send</button>
.fas_button_gsio{
	border: none;
	padding: 0 20px;
	height: 40px;
	line-height: 1;
	color: #fff;
	background: #0046d3;
	background: -moz-linear-gradient(top, #0046d3 0%, #4b86fc 100%);
	background: -webkit-linear-gradient(top, #0046d3 0%, #4b86fc 100%);
	background: linear-gradient(to bottom, #0046d3 0%, #4b86fc 100%);
	color: #fff;
	border-radius: 5px;
	border: 1px solid #0046d3;
	box-shadow: 2px 2px 2px 0 #4b86fc inset, 0 3px 0 0 #0046d3;
	font-size: 1em;
	cursor: pointer;
}
.fas_button_gsio:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0e0';
	margin-right: 5px;
}

グラデーション＋内部の影＋外部の影で立体的に見せたボタンのサンプルです。linear-gradientで背景をグラデーション化して、box-shadowで内部と外部の２種類の影を付けています。