สร้าง button styles อะไรได้?

สร้าง flat, outlined, gradient, 3D, rounded, pill, icon และ animated button styles พร้อมสีกำหนดเอง

เพิ่ม hover effects อย่างไร?

กำหนด hover colors, shadows, transforms และ transitions ดูตัวอย่าง hover state ก่อนคัดลอก CSS

ใส่ icons ใน buttons ได้ไหม?

ได้ เพิ่ม icons ก่อนหรือหลังข้อความ generator รวม icon positioning CSS ทั่วไป

buttons เข้าถึงได้หรือไม่?

buttons ที่สร้างรวม focus states เพิ่ม aria labels ที่เหมาะสมและรับประกัน color contrast เพียงพอ

เครื่องมือสร้างปุ่ม CSS

สร้างโค้ด HTML และ CSS สำหรับปุ่มที่กำหนดเอง ออกแบบปุ่มสวยงามด้วยสไตล์ สี และเอฟเฟกต์เมาส์เหลือทันที

ข้อความบนปุ่ม

สีพื้นหลัง

สีข้อความ

ขนาดฟอนต์ (16px)

ความหนาฟอนต์

ระยะห่างแนวนอน (24px)

ระยะห่างแนวตั้ง (12px)

ความโค้งมน (8px)

ความหนาขอบ (0px)

สีขอบ

รูปแบบสำเร็จรูป

ตัวอย่าง

โค้ด CSS

.button {
  /* Layout */
  padding: 12px 24px;

  /* Colors */
  background-color: #3b82f6;
  color: #ffffff;
  border: 0px solid #000000;

  /* Typography */
  font-size: 16px;
  font-weight: 500;

  /* Effects */
  border-radius: 8px;
  box-shadow: 0px 2px 4px #00000040;

  /* Interaction */
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0px 4px 6px #00000040;
}

.button:active {
  transform: translateY(0);
}

เกี่ยวกับเครื่องมือสร้างปุ่ม CSS

เครื่องมือสร้างปุ่ม CSS เป็นตัวช่วยสำหรับนักพัฒนาที่ช่วยลดความยุ่งยากในการเขียนโค้ดปุ่มเว็บ แทนที่จะต้องเขียน CSS เองและกดรีเฟรชดูผลลัพธ์ คุณสามารถปรับแต่งทุกส่วนของปุ่มและเห็นการเปลี่ยนแปลงได้ทันที

• ตัวแก้ไขแบบรูปภาพ: ปรับระยะห่าง สี และขอบด้วยแถบเลื่อนที่ใช้งานง่าย
• โค้ดพร้อมใช้: รับโค้ด CSS ที่พร้อมนำไปใช้งานได้ทันที
• รูปแบบสำเร็จรูป: เริ่มต้นได้รวดเร็วด้วยดีไซน์ที่มีให้ เช่น แบบเส้นขอบ, แบบมน หรือแบบเรียบ

Loading tool...