จัดสไตล์ปุ่ม Submit ด้วย CSS

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

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    input[type="submit"] {
      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="submit" value="Submit">
  </form>
</body>
</html>

คำอธิบาย: ใช้ input[type="submit"] เลือกเฉพาะปุ่ม submit สไตล์เดียวกับปุ่ม reset แต่เฉพาะ submit เท่านั้น