เครื่องกําเนิดปุ่ม CSS
สร้างปุ่มที่กําหนดเองด้วยรหัส CSS
tools.buttonGenerator.title
tools.buttonGenerator.description
.click-me {
padding: 12px 18px;
font-size: 16px;
font-weight: 600;
border-radius: 4px;
border: none;
background-color: #3B82F6;
color: #FFFFFF;
cursor: pointer;
}
.click-me:hover {
background-color: #2563EB;
}ออกแบบปุ่มแบบกำหนดเองด้วยสไตล์ CSS โดยใช้เครื่องมือสร้างปุ่มของเรา สร้างปุ่มที่มีสไตล์ด้วยสี ขนาด เส้นขอบ และเอฟเฟกต์โฮเวอร์สำหรับโครงการเว็บของคุณ
Key Features
ข้อความและสไตล์ของปุ่มที่ปรับแต่งได้
ตัวเลือกสีสำหรับสีพื้นหลังและข้อความ
ระยะห่างจากขอบที่ปรับได้ ขนาดตัวอักษร และรัศมีเส้นขอบ
ตัวเลือกน้ำหนักและสไตล์แบบอักษร
การจัดรูปแบบเส้นขอบ (ไม่มี สีทึบ ประ มีจุด)
การเลือกสีเอฟเฟกต์โฮเวอร์
เครื่องกำเนิดปุ่ม
ป้อนข้อความของปุ่ม
พิมพ์ข้อความป้ายกำกับที่คุณต้องการให้ปรากฏบนปุ่ม
ปรับแต่งสี
ใช้ตัวเลือกสีเพื่อตั้งค่าพื้นหลัง ข้อความ และสีโฮเวอร์
ปรับขนาด
ตั้งค่าระยะห่างจากขอบ ขนาดตัวอักษร และรัศมีเส้นขอบสำหรับการกำหนดขนาด
เพิ่มสไตล์
เลือกน้ำหนักแบบอักษรและเลือกรูปแบบเส้นขอบหากต้องการ
คัดลอก CSS
คลิกคัดลอกเพื่อรับโค้ด CSS สำหรับปุ่มสไตล์ของคุณ
Use Cases
การสร้างปุ่มกระตุ้นการตัดสินใจสำหรับหน้า Landing Page
การออกแบบรูปแบบปุ่มที่สอดคล้องกันสำหรับเว็บแอปพลิเคชัน
การสร้างสถานะโฮเวอร์ของปุ่มสำหรับการตอบสนองแบบโต้ตอบ
การสร้างต้นแบบส่วนประกอบ UI สำหรับระบบการออกแบบ
Frequently Asked Questions
ฉันสามารถสร้างสถานะปุ่มที่แตกต่างกันได้หรือไม่
ใช่ ตัวสร้างจะสร้าง CSS ทั้งแบบปกติและสถานะโฮเวอร์โดยอัตโนมัติ
คลาส CSS ใดที่ถูกสร้างขึ้น?
เครื่องมือนี้สร้างชื่อคลาสเชิงความหมายตามข้อความปุ่มของคุณ
ฉันสามารถปรับแต่งรูปแบบเส้นขอบได้หรือไม่?
ใช่ เลือกจากไม่มี ขอบทึบ เส้นประ เส้นประ หรือขอบคู่พร้อมความกว้างที่กำหนดเอง
รหัสพร้อมสำหรับการผลิตแล้วหรือยัง?
ใช่ CSS ที่สร้างขึ้นทั้งหมดได้รับการปรับให้เหมาะสมและพร้อมใช้งานในการผลิต
Tool Information
Related Tools You Might Like
Color Palette Generator จากภาพ
สารสกัดสีที่โดดเด่นจากภาพ
RGB / Hex แปลง
การแปลงระหว่างรูปแบบสี RGB และ HEX
เครื่องกําเนิดไฟฟ้า CSS
สร้าง CSS Gradients ที่กําหนดเองด้วย Preview
WCAG Contrast เช็ค
ตรวจสอบความต้านทานสีตามมาตรฐาน WCAG
เครื่องกําเนิดสัญญาณดิจิตอล
สร้างสัญญาณดิจิตอลแบบสไตล์ด้วยตัวอักษรที่แตกต่างกัน
เครื่องกําเนิดไฟฟ้า Box Shadow
สร้าง CSS Box Shadows
เครื่องคํานวณปริมาณ Surfboard
การคํานวณปริมาณ surfboard ที่สมบูรณ์แบบขึ้นอยู่กับน้ําหนักของคุณระดับประสบการณ์และเงื่อนไขคลื่น
Wave Height แปลง
แปลงระหว่างการวัดความสูงของคลื่นที่แตกต่างกัน (ความสูงของใบหน้า, ระดับฮาเวียน, น้ําแตกของทะเล)
สกูบา Dive Planner
การวางแผนการดูดสกูบของคุณด้วยข้อ จํากัด ความลึกเวลาด้านล่างและความต้องการความปลอดภัย