ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
บทความวิกิฮาวนี้จะแนะนำวิธีการเปลี่ยนสีปุ่มใน HTML ให้คุณเอง คุณเปลี่ยนสีปุ่มได้โดยใช้โค้ด HTML มาตรฐาน หรือใช้ CSS (Cascading Style Sheets) ของ HTML5
ขั้นตอน
-
พิมพ์ <button ใน body หรือเนื้อหาของ HTML. แท็กของปุ่มในโค้ด HTML จะเริ่มตรงนี้ โดยส่วนเนื้อหาหรือ body ของโค้ด HTML จะอยู่ระหว่างแท็ก <body> กับแท็ก </body> โดย body เป็นส่วนที่กำหนดองค์ประกอบที่เราเห็นในหน้าเว็บ ในโค้ด HTML
-
พิมพ์ style= ต่อท้าย "button" ในแท็กปุ่ม. เพื่อกำหนดว่ามี style elements ในแท็กปุ่ม ทุก style elements จะอยู่หลังเครื่องหมาย "="
-
ใส่เครื่องหมายคำพูด (") ต่อท้ายเครื่องหมายเท่ากับ (=). style elements ทั้งหมดในแท็กปุ่มของ HTML จะอยู่ในเครื่องหมายคำพูด
-
พิมพ์ background-color: ในเครื่องหมายคำพูด ต่อท้าย "style=" . องค์ประกอบนี้ใช้เปลี่ยนสีพื้นหลังของปุ่ม
-
พิมพ์ชื่อสีหรือโค้ดเลขฐานสิบหก (hexadecimal) ต่อท้าย "background-color:" . จะพิมพ์ชื่อสี (เช่น blue) หรือโค้ด hexadecimal ก็ได้
- ถ้าจะหาโค้ด hexadecimal ให้เข้าเว็บ https://www.google.com/search?q=color+picker ในเบราว์เซอร์ โดยเลือกสีด้วยแถบเลื่อนด้านล่าง เลือกเฉดสีจากวงกลมในหน้าต่าง จากนั้นเลือกแล้ว copy โค้ด 6 หลัก (รวมถึงเครื่องหมายสี่เหลี่ยม) ใน sidebar ทางซ้าย ไป paste ในแท็กปุ่ม
- หรือจะใช้ "transparent" (โปร่งใส) เป็นสีพื้นหลังก็ได้ [1] X แหล่งข้อมูลอ้างอิง
-
พิมพ์ semi-colon (;) ต่อท้ายสีพื้นหลัง. ให้ใช้ semi-colon แยก style elements ที่ต่างกันออกจากกัน ในแท็กปุ่ม HTML
-
พิมพ์ border-color: ในเครื่องหมายคำพูด ต่อท้าย "style=" . องค์ประกอบนี้ใช้กำหนดสีกรอบของปุ่ม คุณใส่ style elements ตรงไหนก็ได้ในเครื่องหมายคำพูด หน้าหลังไม่สำคัญ แต่ต้องอยู่หลัง "style=" โดยแต่ละองค์ประกอบต้องคั่นด้วย semi-colon (;)
-
พิมพ์ชื่อสีหรือโค้ด hexidecimal ของสีกรอบ. ชื่อสีหรือโค้ด hexidecimal ของกรอบ จะอยู่หลังองค์ประกอบ "border-color:"
- ถ้าจะลบกรอบ ให้พิมพ์ border:none แทนองค์ประกอบ "border-color:"
-
พิมพ์ semi-colon (;) ต่อท้ายสีกรอบ. ให้ใช้ semi-colon แยก style elements ที่ต่างกันออกจากกัน ในแท็กปุ่ม HTML
-
พิมพ์ color: ในเครื่องหมายคำพูด ต่อท้าย "style=" . องค์ประกอบนี้ใช้เปลี่ยนสีข้อความในปุ่ม คุณใส่ style elements ตรงไหนก็ได้ในเครื่องหมายคำพูด ต่อท้าย "style=" แต่ละ element ต้องคั่นด้วย semi-colon (;)
-
พิมพ์ชื่อสีหรือโค้ด hexadecimal. ต่อท้าย "color:" ใน style element เพื่อกำหนดสีข้อความในปุ่ม
-
พิมพ์เครื่องหมายคำพูด (") ต่อท้าย style elements ทั้งหมด. style elements ทั้งหมดต้องอยู่ในเครื่องหมายคำพูด ต่อท้าย "style=" ในแท็กปุ่ม พอใส่ style elements ทั้งหมดแล้ว ให้พิมพ์เครื่องหมายคำพูด (") ข้างท้าย เพื่อปิด style elements
-
พิมพ์ > ต่อท้าย style elements. เพื่อปิดแท็กเปิดของแท็กปุ่ม
-
พิมพ์ข้อความของปุ่ม ต่อท้ายแท็กปุ่ม. พอสร้างแท็กเปิดของปุ่มแล้ว ให้พิมพ์ข้อความที่อยากให้ปรากฏในปุ่ม ต่อท้ายแท็ก
-
พิมพ์ </button> ต่อท้ายข้อความในปุ่ม. เพื่อเป็นแท็กปิดของปุ่ม เท่านี้ปุ่มก็เสร็จสิ้น โค้ด HTML ที่ได้จะออกมาประมาณนี้
<!DOCTYPE html> < html > < body > < button style = "background-color:red; border-color:blue; color:white" > ข้อความในปุ่ม </ button > </ body > </ html >
โฆษณา
-
พิมพ์ <head> ทางด้านบนของเอกสาร HTML. เพื่อสร้างหัวข้อ (head) เอกสาร HTML หัวข้อของเอกสารนี้ เป็นส่วนของข้อมูลที่ไม่ปรากฏในหน้าเว็บ เช่น เมตาดาตา (meta data) ชื่อของหน้าเว็บ และ style sheets
-
พิมพ์ <style> . เป็นแท็กกำหนดตำแหน่ง CSS (cascading style sheets) ในหน้าเว็บ โดยส่วนนี้จะอยู่ใน head ของเอกสาร HTML
- เอกสาร HTML บางไฟล์ จะใช้ external style sheet คือ style sheet ภายนอก แบบนี้ต้องหาตำแหน่งของไฟล์ external CSS แล้วแก้ไข style sheets ของปุ่ม ในเอกสาร
-
พิมพ์ .button { ในอีกบรรทัด ต่อท้ายส่วนของ style. เพื่อเปิด style sheet ของปุ่มที่กำลังออกแบบ [2] X แหล่งข้อมูลอ้างอิง
- คุณทำให้สีปุ่มเปลี่ยนไปตอนจ่อเคอร์เซอร์ได้ด้วย โดยสร้าง style sheet แยก ให้พิมพ์ .button:hover { เป็นแท็กเปิด
-
พิมพ์ background-color: . ในอีกบรรทัดของ style sheet ของปุ่ม เป็นส่วนที่กำหนดสีพื้นหลังของปุ่ม
-
พิมพ์ชื่อสีหรือโค้ด hexadecimal ตามด้วย semi-colon (;). พิมพ์ต่อท้ายส่วนของ "background-color:" ใน style sheet ของปุ่ม เพื่อกำหนดสีพื้นหลังของปุ่ม
- คุณเช็คโค้ด hexadecimal ได้โดยเข้าเว็บ https://www.google.com/search?q=color+picker ในเบราว์เซอร์ ถ้าจะเลือกสีให้เลื่อนแถบด้านล่าง ถ้าจะเลือกเฉดสี ให้เลือกที่วงกลมในหน้าต่าง จากนั้นเลือกแล้ว copy โค้ด 6 หลัก (ที่มีเครื่องหมายสี่เหลี่ยม) ใน sidebar ทางซ้าย
- คุณพิมพ์ "transparent" เพื่อกำหนดให้พื้นหลังโปร่งใสได้ด้วย
-
พิมพ์ border-color: . ส่วนนี้กำหนดสีกรอบของปุ่ม ให้พิมพ์ในอีกบรรทัดของ style sheet ของปุ่ม
-
พิมพ์ชื่อสีหรือโค้ด hexadecimal ตามด้วย semi-colon (;). เพื่อกำหนดสีกรอบของปุ่ม โดยพิมพ์ต่อท้าย "border-color:" ใน style sheet ของปุ่ม
- ถ้าจะลบกรอบ ให้พิมพ์ border:none; แทน "border-color:colorname"
-
พิมพ์ color: . ให้พิมพ์ในอีกบรรทัดของ style sheet เป็นส่วนที่กำหนดสีข้อความในปุ่ม
-
พิมพ์ชื่อสีหรือโค้ด hexadecimal ตามด้วย semi-colon (;). เพื่อกำหนดสีข้อความในปุ่ม ให้พิมพ์ต่อท้าย "color:" ใน style sheet ของปุ่ม
-
พิมพ์ } ในอีกบรรทัด. เพื่อปิด style sheet ของปุ่ม คุณสร้าง style sheet ของหลายปุ่มได้ โดยตั้งชื่อแต่ละปุ่มไม่ให้ซ้ำกัน
-
พิมพ์ </style> หลังสร้าง CSS เสร็จสิ้น. พอสร้าง style sheet ทั้งหมดเสร็จแล้ว ให้พิมพ์ "</style>" ในอีกบรรทัด เพื่อปิด style section ของเอกสาร HTML
-
พิมพ์ </head> . เพื่อปิด head ของเอกสาร HTML
-
ใน body ของเอกสาร HTML." src="https://www.wikihow.com/images_en/thumb/8/8b/11147764-28.jpg/v4-460px-11147764-28.jpg" decoding="async" class="efab57dd69ac0d209a117a05464a6b9b whcdn content-fill p_maxWidth" data-srclarge="https://www.wikihow.com/images/thumb/8/8b/11147764-28.jpg/v4-728px-11147764-28.jpg" data-width="280" data-height="344" id="efab57dd69ac0d209a117a05464a6b9b"/>
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8b\/11147764-28.jpg\/v4-460px-11147764-28.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8b\/11147764-28.jpg\/v4-728px-11147764-28.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}พิมพ์ <a href="url" class="button">button text</a> ใน body ของเอกสาร HTML. เพื่อใส่ปุ่มในส่วนแสดงผลของโค้ด HTML โดยใช้ style sheet ที่กำหนดไว้ในส่วนของ Style ของเอกสาร HTML ให้เปลี่ยน "url" เป็น address ของเว็บที่เชื่อมต่อกับปุ่ม โดย body ของเอกสาร HTML จะอยู่ระหว่างแท็ก <body> กับแท็ก </body> ของเอกสาร HTML โค้ด HTML ที่ได้จะออกมาประมาณนี้<!DOCTYPE html> < html > < head > < style > . button { background-color : blue ; border-color : red ; color : white ; } </ style > </ head > < body > < a href = "https://www.wikihow.com" class = "button" > Home </ a > </ body > </ html >
โฆษณา
ข้อมูลอ้างอิง
โฆษณา
