CSS Button: คู่มือจัดสไตล์ปุ่ม (Button) แบบครบถ้วน

เมื่อออกแบบเว็บ มักมีปุ่มที่ต้องการลักษณะเฉพาะ เช่น พื้นหลังสีต่างจากองค์ประกอบอื่น เพื่อดึงดูดสายตา

ด้วย CSS สร้าง styled buttons ได้ เปลี่ยนสีพื้นหลัง, สีข้อความ, ขนาดฟอนต์, ขอบ, ความกว้าง/สูง, และอื่นๆ

บทเรียนนี้อธิบายการใช้ CSS properties จัดสไตล์ HTML button พร้อมตัวอย่าง จนจบคุณจะจัดสไตล์ปุ่มอย่างเชี่ยวชาญ

ภาพรวม Button

กำหนด button ใน HTML 2 วิธีหลัก: <button> tag หรือ <input type="button"> ให้ปุ่มแบบเดียวกัน

HTML button ไม่มีสไตล์ (default):

<button>Click me</button>

ใช้ CSS จัดสไตล์ (customize ลักษณะ) บทความนี้ครอบคลุม:

• เปลี่ยนสีพื้นหลัง (background-color)
• เปลี่ยนสีข้อความ (color)
• เปลี่ยนขนาดข้อความ (font-size)
• เพิ่ม padding
• มุมโค้ง (border-radius)
• ขอบสี (border)
• ใช้ :hover feature
• เพิ่มเงา (box-shadow)
• เปลี่ยนความกว้าง (width)
• ปิดใช้งาน (disable)
• อนิเมชัน (animate)
• สร้าง button groups (horizontal/vertical)

1. Background Color (สีพื้นหลัง)

Default: พื้นหลังสีขาว ข้อความสีดำ ใช้ background-color

ตัวอย่าง: ปุ่มพื้นหลังสีชมพู

/* HTML */
<button class="button">Click me</button>

/* CSS */
.button {
  width: 100px; height: 50px;
  background-color: pink;
}

2. Text Color (สีข้อความ)

ใช้ color property

ตัวอย่าง: พื้นหลังชมพู ข้อความสีเขียว

.button {
  width: 100px; height: 50px;
  color: green;
  background-color: pink;
}

3. Text Size (ขนาดข้อความ)

ใช้ font-size

.button {
  width: 100px; height: 50px;
  background-color: blue; color: white;
  font-size: 20px;
}

4. Padding (ระยะห่างข้อความ-ขอบ)

padding ระยะห่างระหว่างข้อความและขอบปุ่ม ใช้ px, em, %

ตัวอย่าง: ปุ่ม padding 20px และ 40px

<button class="button1">Click me</button>
<button class="button2">Click me</button>

.button1 { padding: 20px; font-size: 16px; background-color: blue; color: white; }
.button2 { padding: 40px; font-size: 16px; background-color: blue; color: white; }

5. Rounded Corners (มุมโค้ง)

Default: มุมโค้ง ใช้ border-radius

ตัวอย่าง 3 ขนาด radius:

.button1 { width: 100px; height: 50px; background-color: blue; color: white; border-radius: 5px; }
.button2 { width: 100px; height: 50px; background-color: blue; color: white; border-radius: 10px; }
.button3 { width: 100px; height: 50px; background-color: blue; color: white; border-radius: 15px; }

6. Border Color (ขอบสี)

ใช้ border property

.button {
  background-color: white; color: black;
  border: 3px solid #ffb6c1;  /* Light pink */
  padding: 25px;
}

7. Hover Effect (เอฟเฟกต์เมื่อ Hover)

ใช้ :hover selector เปลี่ยนสไตล์เมื่อ hover

ตัวอย่าง: ปกติขาว/ดำ + ขอบชมพู → Hover: เขียว/ขาว

.button {
  background-color: white; color: black;
  border: 3px solid #ffb6c1; padding: 25px;
}

.button:hover {
  background-color: green; color: white;
}

เพิ่ม transition-duration: 1s ทำให้เปลี่ยนสไตล์นุ่มนวลใน 1 วินาที

8. Shadows (เงา)

ใช้ box-shadow property

ตัวอย่าง: Drop shadow

.button {
  background-color: white; color: black;
  border: 3px solid #ffb6c1; padding: 25px;
  box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
}

พารามิเตอร์: x-offset 0, y-offset 10px, blur 10px, spread 0, สี rgba(0,0,0,0.2) = เทาอ่อน

9. Width (ความกว้าง)

width property กำหนดความกว้างเฉพาะ (default ขึ้นกับเนื้อหา)

.button1 { width: 250px; ... }
.button2 { width: 50%; ... }
.button3 { width: 100%; ... }

10. Disabling a Button (ปิดใช้งานปุ่ม)

ใช้ opacity (ความโปร่งใส) + cursor: not-allowed

• opacity: 0.5 — โปร่งใส 50% ดูเหมือน disabled
• cursor: not-allowed — เมาส์แสดง stop sign เมื่อ hover

.button1 { background-color: #ffb6c1; color: black; padding: 25px; }
.button2 { 
  background-color: #ffb6c1; color: black; padding: 25px;
  border: none; opacity: 0.5; cursor: not-allowed;
}

11. Creating Button Groups (กลุ่มปุ่ม)

Horizontal Button Group (แนวนอน)

ใช้ float: left จัดเรียงติดกัน

.button {
  background-color: #ffb6c1; color: black;
  padding: 25px; border: none; float: left;
}

เพิ่มขอบแยกปุ่ม: border: 2px solid blue;

Vertical Button Group (แนวตั้ง)

ใช้ display: block

.button {
  background-color: #ffb6c1; color: black;
  padding: 25px; border: 2px solid blue; display: block;
}

12. Animating Buttons (อนิเมชันปุ่ม)

Pressed Effect (เอฟเฟกต์กดปุ่ม)

ปุ่ม light blue + shadow สีเทา → คลิก: กลายเป็นชมพู + shadow สีเทาอ่อน + กดเข้าไป (translateY)

.button {
  padding: 20px; font-size: 15px; color: white;
  background-color: lightblue; border: none;
  transition-duration: 0.5s; border-radius: 8px;
  box-shadow: 0 5px gray;
}

.button:active {
  background-color: #ffb6c1;
  box-shadow: 0 5px lightgray;
  transform: translateY(5px);
}

.button:active ใช้ transform: translateY(5px) ทำให้ปุ่มดูเหมือนถูกกดเข้าไป

Fade-In Effect (เอฟเฟกต์ลางเลื่อนเข้ามา)

ใช้ opacity + transition + :hover

.button {
  padding: 20px; font-size: 15px; color: white;
  background-color: lightblue; border: none;
  transition-duration: 0.5s; border-radius: 8px;
  opacity: 0.7;
}

.button:hover { opacity: 1; }

สรุป

HTML กำหนดโครงสร้างปุ่ม CSS จัดสไตล์ตามต้องการ บทเรียนนี้ครอบคลุม: background-color, color, font-size, padding, border-radius, border, :hover, box-shadow, width, disabled state, button groups (horizontal/vertical), และ animations (pressed, fade-in) ตอนนี้คุณพร้อมจัดสไตล์ปุ่ม CSS อย่างมืออาชีพ!