จัดสไตล์ Input Type Button ด้วย CSS

ปุ่มประเภท input สามารถเป็น submit, reset, หรือ button ด้วย CSS เราสามารถจัดสไตล์ปุ่มทุกประเภทได้

ตัวอย่างโค้ด

ลองรันโค้ดด้านล่างเพื่อจัดสไตล์ input type button:

<!DOCTYPE html>
<html>
<head>
  <style>
    input[type="button"] {
      background-color: orange;
      border: none;
      text-decoration: none;
      color: white;
      padding: 20px 20px;
      margin: 20px 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <p>กรอกฟอร์มด้านล่าง:</p>
  <form>
    <label for="subject">Subject</label>
    <input type="text" id="subject" name="sub"><br><br>
    <label for="student">Student</label>
    <input type="text" id="student" name="stu"><br>
    <input type="button" value="Button">
  </form>
</body>
</html>

คำอธิบาย: input[type="button"] เลือกเฉพาะปุ่มแบบ button (ไม่ใช่ submit/reset) สไตล์เหมือนปุ่มอื่นๆ สีส้ม ขาว ไม่มีขอบ มี padding cursor pointer