วิธีสร้าง: ปุ่มโหลด

เรียนรู้ว่าจะตั้งค่าปุ่มโหลดด้วย 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 ลงในปุ่ม (โปรดจำเป็นติดตามคลาส 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 /* ตั้งค่าขนาดของตัวอักษร */
}

ทดลองด้วยตัวเอง