คอร์สแนะนำ:

แบบจำลองการสร้าง: กลุ่มปุ่มตั้งแต่ตัวอักษรตัวย่อ

แบบจำลองการสร้างกลุ่มปุ่มตั้งแต่ตัวอักษรตัวย่อ

ขั้นที่ 1 - เพิ่ม HTML:

<div class="btn-group">
  <button>Apple</button>
  <button>Samsung</button>
  <button>Sony</button>
</div>

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

.btn-group button {
  background-color: #04AA6D; /* พื้นหลังสีเขียว */
  border: 1px solid green; /* ขอบเขตสีเขียว */
  color: white; /* ข้อความสีขาว */
  padding: 10px 24px; /* ขอบเขตด้านในบางส่วน */
  cursor: pointer; /* ตัวนาฬิกาหรือรูปมือ */
  width: 50%; /* ถ้าต้องการ ตั้งความกว้าง */
  display: block; /* ทำให้ปุ่มหล่อม */
}
.btn-group button:not(:last-child) {
  border-bottom: none; /* หลังจากปิดกรอบทั้งสองข้าง */
}
/* หลังจากให้เครื่องมือเข้าไปเกี่ยวกับมีดความเป็นตัวตน */
.btn-group button:hover {
  background-color: #3e8e41;
}

亲自试一试

相关页面

教程：CSS 按钮