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

ข้อความ CSS สำหรับการใส่สไตล์ปุ่ม

#submit {background-color: #bbb; การขยาย: .5em; -moz-border-radius: 5px; -webkit-border-radius: 5px; รัศมี - ชายแดน: 6px; สี: #fff; ตระกูลฟอนต์: 'Oswald'; ขนาดตัวอักษร: 20px; การตกแต่งข้อความ: ไม่มี; เส้นขอบ: ไม่มี; } #submit: โฮเวอร์ {border: none; พื้นหลัง: ส้ม กล่องเงา: 0px 0px 1px # 777; }

รหัส HTML สำหรับสร้างปุ่ม

หลังจากเพิ่ม CSS ในเพจที่สามารถใช้ CSS กับปุ่มใดก็ได้โดยใช้รหัสใน HTML

ปุ่มตัวอย่าง

ตัวอย่างของปุ่มที่สร้างโดย CSS

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