Button Patterns

รวม button patterns ที่ใช้บ่อย — copy-paste ready พร้อม live demo

CustomButton

Wrapper รอบ shadcn Button — รับ icon, label, children, onClick ผ่านได้หมด

Component — ดูโค้ดด้านล่าง

1. icon + label

2. variant + className

3. children (icon สลับ)

ปุ่ม gradient ที่เปลี่ยนทิศทางเมื่อ hover

ปุ่มที่มี icon เลื่อนเมื่อ hover ด้วย group + translate

ปุ่มที่แสดง spinner ขณะ loading — disable ป้องกัน double click

ปุ่มที่มี shimmer วิ่งผ่านเมื่อ hover — ใช้ CSS pseudo-element

ปุ่มที่เคลื่อนตาม cursor เมื่อ hover — ใช้ onMouseMove + transform

ปุ่มเรืองแสง — ใช้ box-shadow หลายชั้น

ปุ่ม copy ที่เปลี่ยน icon เป็น check เมื่อ copy สำเร็จ

ปุ่ม social login — แต่ละปุ่มมีสีของ brand