どのように作成するか：ロードボタン

ロードボタンのスタイルを設定する方法

第1段 - HTMLを追加：

アイコンライブラリを追加し、HTMLボタンにアイコンを付ける：

<!-- アイコンライブラリを追加 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- ボタンにFont Awesomeアイコンを追加（fa-spinクラスがアイコンを回転させることに注意してください） -->
<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i>Loading
</button>
<button class="buttonload">
  <i class="fa fa-circle-o-notch fa-spin"></i>Loading
</button>
<button class="buttonload">
  <i class="fa fa-refresh fa-spin"></i>Loading
</button>

第2段 - CSSを追加：

/* ボタンのスタイルを設定 */
.buttonload {
  background-color: #04AA6D; /* 青色の背景 */
  border: none; /* 枠線を削除 */
  color: white; /* 白色のテキスト */
  padding: 12px 16px; /* 内余白 */
  font-size: 16px /* フォントサイズを設定 */
}

自分で試してみる

関連ページ

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

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

チュートリアル：実現方法：CSSローダーを作成する