วิธีการสร้าง: ปุ่มภาพอิทธิ์

วิธีการสร้างปุ่มภาพอิทธิ์

ขั้นที่ 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> Folder</button>

ขั้นที่ 2 - เพิ่ม CSS:

/* กำหนดรูปแบบของปุ่ม */
.btn {
  background-color: สีดาวแดงขาว;
  border: none; /* ลบเข็มขัด */
  color: white; /* ข้อความสีขาว */
  padding: 12px 16px; /* ระยะทางของด้านภายใน */
  font-size: 16px; /* กำหนดขนาดตัวอักษร */
  cursor: pointer; /* ตัวชี้นาฬิกาของหมุนตามหลังเมาส์ */
}
/* สีหลังของแถววางในขณะที่เปลี่ยนเป็นเหมือนที่กำหนด */
.btn:hover {
  background-color: สีทองแก้ว;
}

亲自试一试

相关页面

教程：图标教程

教程：CSS 按钮