作成方法:アイコンボタン
- 前のページ 通知ボタン
- 次のページ 次のページ/前のページボタン
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ボタン
- 前のページ 通知ボタン
- 次のページ 次のページ/前のページボタン