作成方法:アイコンボタン

CSSを使用してアイコンボタンを作成する方法を学びます。

アイコンボタン:

テキスト付きのアイコンボタン:

自分で試してみる

アイコンボタンを作成する方法

第1ステップ - HTMLを追加:

アイコンライブラリを追加し、例えば font Awesomeを使用して、HTMLボタンにアイコンを追加します:

<!-- 追加アイコンライブラリ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- ボタンにFont Awesomeアイコンを追加 -->
<p>アイコンボタン:</p>
<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>
<p>テキスト付きアイコンボタン:</p>
<button class="btn"><i class="fa fa-home"></i> ホーム</button>
<button class="btn"><i class="fa fa-bars"></i> メニュー</button>
<button class="btn"><i class="fa fa-trash"></i> 削除</button>
<button class="btn"><i class="fa fa-close"></i> 閉じる</button>
<button class="btn"><i class="fa fa-folder"></i> フォルダー</button>

第2段 - CSSを追加:

/* ボタンのスタイルを設定 */
.btn {
  background-color: DodgerBlue; /* 蓝色の背景 */
  border: none; /* 枠線を削除 */
  color: white; /* 白色のテキスト */
  padding: 12px 16px; /* 少々のインセット */
  font-size: 16px; /* フォントサイズを設定 */
  cursor: pointer; /* マウスオーバー時のカーソル */
}
/* マウスオーバー時の背景を暗くする */
.btn:hover {
  background-color: RoyalBlue;
}

自分で試してみる

関連ページ

チュートリアル:アイコンチュートリアル

チュートリアル:CSSボタン