ปุ่ม CSS

เมื่อออกแบบเว็บไซต์ คุณมักจะมีปุ่มที่คุณต้องการให้มีลักษณะเฉพาะ ตัวอย่างเช่น คุณอาจต้องการให้ปุ่มมีสีพื้นหลังที่แตกต่างจากองค์ประกอบของหน้าอื่นๆ เพื่อดึงดูดความสนใจของผู้ใช้ไปที่ปุ่ม

การใช้ CSS นักพัฒนาสามารถสร้างปุ่มที่มีสไตล์ได้ CSS ช่วยให้คุณเปลี่ยนสีของปุ่ม ขนาดข้อความ เส้นขอบ ความกว้าง และความสูงของปุ่มได้

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

ภาพรวมของปุ่ม

คุณสามารถกำหนดปุ่มได้หลายวิธีใน HTML สองแนวทางที่พบบ่อยที่สุดคือ <button> แท็กหรือ <input type=“button”> องค์ประกอบ. วิธีการเหล่านี้จะคืนค่าปุ่มประเภทเดียวกัน

รหัส HTML ใช้เพื่อกำหนดปุ่ม ปุ่ม HTML เป็นแบบไม่มีรูปแบบดังนี้

รหัสที่เราใช้สำหรับปุ่มนี้คือ:

<button>Click me</button>


ปุ่มนี้ใช้รูปแบบ HTML เริ่มต้น ซึ่งหมายความว่าตอนนี้ปุ่มดูค่อนข้างธรรมดา

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

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

• เปลี่ยนสีพื้นหลัง
• เปลี่ยนสีข้อความ
• เปลี่ยนขนาดตัวอักษร
• เพิ่มช่องว่างภายใน
• รอบมุม
• เพิ่มเส้นขอบสี
• ใช้คุณสมบัติ :hover
• เพิ่มเงา
• เปลี่ยนความกว้าง
• ปิดการใช้งาน
• ทำให้เคลื่อนไหว

เราจะพูดถึงวิธีสร้างกลุ่มปุ่มแนวนอนและแนวตั้งด้วย

สีพื้นหลัง

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

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

index.html

<button class="button">Click me</button>

styles.css

.button { 
	width: 100px;
	height: 50px;
background-color: pink;
}

รหัสของเราส่งคืน:

การใช้คุณสมบัติสีพื้นหลัง เราเปลี่ยนสีพื้นหลังของปุ่มเป็นสีชมพู เราสามารถเปลี่ยนสีพื้นหลังของปุ่มของเราเป็นสีใดก็ได้โดยใช้คุณสมบัตินี้

สีข้อความ

หากต้องการเปลี่ยนสีข้อความของปุ่ม คุณสามารถใช้คุณสมบัติสีได้ สมมติว่าเรากำลังออกแบบปุ่มและต้องการให้ปุ่มมีพื้นหลังสีชมพูและข้อความสีเขียว เราสามารถสร้างปุ่มนี้โดยใช้รหัสต่อไปนี้:

index.html

<button class="button">Click me</button>

styles.css

.button { 
	width: 100px;
	height: 50px;
	color: green;
background-color: pink;
}

รหัสของเราส่งคืน:

ในรหัสของเรา เราใช้สี:สีเขียว; คุณสมบัติเพื่อกำหนดสีของข้อความในปุ่มของเราเป็นสีเขียว

ขนาดตัวอักษร

คุณสามารถใช้คุณสมบัติขนาดฟอนต์ CSS เพื่อกำหนดขนาดข้อความภายในปุ่มได้ สมมติว่าเราต้องการให้ข้อความมีขนาดตัวอักษร 20px เราสามารถทำให้สิ่งนี้เกิดขึ้นได้โดยใช้รหัสต่อไปนี้:

index.html

<button class="button">Click me</button>

styles.css

.button { 
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
font-size: 20px;
}

รหัสของเราส่งคืน:

ปุ่มของเรามีขนาดเท่าเดิม แต่ตอนนี้ขนาดฟอนต์ภายในมีขนาด 20px เราใช้แอตทริบิวต์ขนาดแบบอักษรเพื่อกำหนดขนาดของข้อความในปุ่มของเรา

แพดดิ้ง

เมื่อออกแบบปุ่ม คุณอาจตัดสินใจว่าคุณต้องการช่องว่างจำนวนหนึ่งระหว่างข้อความภายในปุ่มและผนังด้านนอกของปุ่ม นั่นคือสิ่งที่คุณสมบัติช่องว่างภายในเข้ามา

คุณสมบัติ padding ใช้ตัวบ่งชี้ความยาว (px, em และอื่นๆ) หรือค่าเปอร์เซ็นต์เพื่อกำหนดช่องว่างระหว่างข้อความของปุ่มและเส้นขอบจำนวนหนึ่ง

สมมติว่าเราต้องการสร้างปุ่มสองปุ่มบนหน้าของเรา ปุ่มหนึ่งควรมีช่องว่างภายใน 40px และอีกปุ่มหนึ่งควรมีช่องว่างภายในขนาด 20px เราสามารถสร้างปุ่มเหล่านี้ได้โดยใช้รหัสต่อไปนี้:

index.html

<button class="button1">Click me</button>
<button class="button2">Click me</button>

styles.css

.button1 {
	padding: 20px;
	font-size: 16px;
	background-color: blue;
	color: white;
}

.button2 {
	padding: 40px;
	font-size: 16px;
	background-color: blue;
	color: white;
}

รหัสของเราส่งคืน:

ปุ่มแรกของเรามีขอบเขต 20px ระหว่างข้อความภายในปุ่มและเส้นขอบของปุ่ม ปุ่มที่สองของเรามีขอบเขต 40px ระหว่างข้อความและเส้นขอบของปุ่ม สำหรับปุ่มเหล่านี้ เราไม่ได้ระบุแอตทริบิวต์ความกว้างหรือความสูงเพื่อให้แน่ใจว่ามีพื้นที่เพียงพอสำหรับช่องว่างภายในนี้ (เราจะพูดถึงคุณลักษณะเหล่านี้ด้านล่าง)

มุมโค้งมน

ตามค่าเริ่มต้น ปุ่มใน HTML จะมีขอบสี่เหลี่ยมจัตุรัส อย่างไรก็ตาม คุณอาจตัดสินใจว่าต้องการให้ปุ่มของคุณมีมุมมน

คุณสามารถใช้คุณสมบัติ border-radius เพื่อสร้างปุ่มสี่เหลี่ยมที่มีมุมโค้งมน ด้านล่างนี้คือตัวอย่างโค้ดที่ใช้คุณสมบัติ border-radius สามตัวอย่าง เพื่อแสดงผลกระทบของขนาดรัศมีต่างๆ แต่ละตัวอย่างใช้รัศมีเส้นขอบที่มีขนาดต่างกัน

index.html

<button class="button1">Click me</button>
<button class="button2">Click me</button>
<button class="button3">Click me</button>

styles.css

.button1 {
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
border-radius: 5px;
}

.button2 {
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
border-radius: 10px;
}

.button3 {
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
border-radius: 15px;
}

รหัสของเราส่งคืน:

ในตัวอย่างนี้ เราได้สร้างปุ่มสามปุ่ม ยิ่งรัศมีเส้นขอบของปุ่มใหญ่ขึ้น มุมของปุ่มก็จะยิ่งโค้งมนมากขึ้น

สีเส้นขอบ

คุณสามารถเพิ่มเส้นขอบสีแบบกำหนดเองให้กับปุ่มที่มีคุณสมบัติเส้นขอบ CSS

สมมติว่าคุณต้องการสร้างปุ่มที่มีเส้นขอบสีเพื่อให้ผู้ใช้เห็นขอบเขตของปุ่มได้ชัดเจน คุณสามารถสร้างปุ่มดังกล่าวได้โดยใช้รหัสต่อไปนี้:

index.html

<button class="button">Click me</button>

styles.css

.button {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1; // Light pink
	padding: 25px;
}

รหัสของเราส่งคืน:

ปุ่มของเรามีพื้นหลังสีขาว เนื้อหาเป็นสีดำ และมีช่องว่างภายในขนาด 25px ที่ขอบทั้งหมด เราใช้คุณสมบัติ border เพื่อสร้างเส้นขอบทึบที่มีความกว้าง 3px รอบปุ่ม และเราตั้งค่าสีของเส้นขอบเป็น #ffb6c1 ซึ่งเป็นค่าฐานสิบหกสำหรับสีชมพูอ่อน

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติเส้นขอบ อ่านบทความของเราเกี่ยวกับคุณสมบัติเส้นขอบ CSS

โฮเวอร์

คุณสามารถใช้ CSS :hover ตัวเลือกเพื่อกำหนดทิศทางของหน้าเว็บเพื่อเปลี่ยนรูปแบบของปุ่มเมื่อผู้ใช้วางเคอร์เซอร์ไว้เหนือปุ่ม

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

index.html

<button class="button">Click me</button>

styles.css

.button {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
}

.button:hover {
	background-color: green;
	color: white;
}

นี่คือผลลัพธ์ของรหัสของเรา:

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

ทันทีที่เคอร์เซอร์ของผู้ใช้เคลื่อนออกจากปุ่ม ปุ่มจะกลับสู่สถานะเริ่มต้น

นอกจากนี้ เราสามารถใช้แอตทริบิวต์ Transition-duration เพื่อระบุระยะเวลาที่ควรใช้ในการเปลี่ยนปุ่มหลังจากที่ผู้ใช้วางเคอร์เซอร์ไว้เหนือปุ่มนั้น ดังนั้น หากเราต้องการใช้เวลา 1 วินาทีในการเปลี่ยนปุ่มด้านบน (ให้มีพื้นหลังสีเขียวและข้อความสีขาว) เราสามารถใช้รหัสนี้:

.button {
	…
	transition-duration: 1s;
}

ตอนนี้เมื่อผู้ใช้วางเมาส์เหนือปุ่ม จะใช้เวลาหนึ่งวินาทีในการเปลี่ยนปุ่ม คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการเปลี่ยน CSS ในคู่มือเริ่มต้นของเราเกี่ยวกับการเปลี่ยน CSS

เงา

คุณสามารถใช้คุณสมบัติ CSS box-shadow เพื่อสร้างเงาปุ่มได้ คุณสมบัติ box-shadow มีหลายพารามิเตอร์ คุณสามารถเรียนรู้เกี่ยวกับพารามิเตอร์เหล่านี้ได้ในบทช่วยสอน CSS box-shadow

สมมติว่าเรากำลังออกแบบปุ่มและเราต้องการให้ปุ่มมีเงาตกกระทบ เราสามารถสร้างเงานี้โดยใช้รหัสต่อไปนี้สำหรับปุ่ม:

index.html

<button class="button">Click me</button>

styles.css

.button {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
}

รหัสของเราส่งคืน:

ในตัวอย่างนี้ เราได้เพิ่มเงาให้กับปุ่มของเรา พารามิเตอร์ที่เราระบุสำหรับเงาของเรามีดังนี้:

• ค่าออฟเซ็ต x คือ 0 ซึ่งหมายความว่าเงาของเราปรากฏขึ้นใต้ปุ่มของเราโดยตรง
• ค่า y-offset คือ 10px ซึ่งหมายความว่าเงาของเราขยายด้านล่างปุ่มของเรา 10px
• รัศมีการเบลอคือ 10px ซึ่งหมายความว่าเงาของเรามีผลการเบลอ
• รัศมีการแพร่กระจายสำหรับเงาของปุ่มของเราคือ 0 ดังนั้นจึงไม่มีการแพร่กระจายไปรอบๆ การเบลอ
• สีของเงาของเราคือ rgba(0,0,0,0.2) ซึ่งเป็นสีเทาอ่อน

ดังที่คุณเห็นในผลลัพธ์โค้ดด้านบน ปุ่มของเราปรากฏขึ้นพร้อมกับคุณสมบัติทั้งหมดเหล่านี้

ความกว้าง

คุณสมบัติ width สามารถกำหนดความกว้างของปุ่มได้ ตามค่าเริ่มต้น ขนาดของปุ่มจะขึ้นอยู่กับเนื้อหาข้อความ แต่คุณสามารถใช้คุณสมบัติ width เพื่อแทนที่ค่าเริ่มต้นและตั้งค่าความกว้างเฉพาะได้

ต่อไปนี้คือตัวอย่างปุ่มสามปุ่มที่มีความกว้างต่างกัน:

index.html

<button class="button1">Click me</button>
<button class="button2">Click me</button>
<button class="button3">Click me</button>

styles.css

.button1 {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	width: 250px;
}

.button2 {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	width: 50%;
}

.button2 {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	width: 100%;
}

รหัสของเราส่งคืน:

ในตัวอย่างของเรา เราได้สร้างปุ่มสามปุ่มที่มีความกว้างต่างกัน

ปิดการใช้งานปุ่ม

เมื่อออกแบบปุ่ม คุณอาจตัดสินใจปิดใช้งานปุ่มดังกล่าว แต่ให้แสดงปุ่มนั้นบนเพจ ตัวอย่างเช่น คุณอาจต้องการปิดใช้งานปุ่มจนกว่าผู้ใช้จะกรอกข้อมูลในฟิลด์ทั้งหมดในแบบฟอร์มบนเว็บ

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

คุณสมบัติเคอร์เซอร์ เมื่อกำหนดค่า "ไม่อนุญาต" จะปิดใช้งานปุ่ม เมื่อผู้ใช้วางเมาส์เหนือปุ่มที่มีค่านี้กำหนดไว้ เคอร์เซอร์จะแสดงป้ายหยุด

นี่คือรหัสสำหรับปุ่มปกติใน HTML ตามด้วยรหัสสำหรับปุ่มที่ถูกปิดใช้งาน:

index.html

<button class="button1">Click me</button>
<button class="button2">Click me</button>

styles.css

.button1 {
	background-color: #ffb6c1;
	color: black;
	padding: 25px;
}

.button2 {
	background-color: #ffb6c1;
	color: black;
	padding: 25px;
  	border: none;
  	opacity: 0.5;
  	cursor: not-allowed;
}

รหัสของเราส่งคืน:

ทั้งสองปุ่มมี #ffb6c1 . สีชมพู ภูมิหลัง พื้นหลังของปุ่มแรกเป็นแบบทึบแสงทั้งหมด ซึ่งเป็นค่าเริ่มต้น ปุ่มนี้ใช้งานได้ (ซึ่งเป็นค่าเริ่มต้น) ปุ่มที่สองมีการตั้งค่าคุณสมบัติความทึบเป็น 0.5 และค่าของคุณสมบัติเคอร์เซอร์ตั้งค่าเป็น not-allowed . สิ่งนี้จะสร้างปุ่ม (ปิดการใช้งาน) ที่โปร่งใสและใช้งานไม่ได้

การสร้างกลุ่มปุ่ม

เมื่อคุณกำลังพัฒนาไซต์ คุณอาจต้องการสร้างกลุ่มของปุ่ม ตัวอย่างเช่น หากคุณกำลังออกแบบแบบฟอร์ม คุณอาจต้องการมีกลุ่มปุ่มที่มีปุ่มสามปุ่มที่อนุญาตให้ผู้ใช้บันทึกแบบฟอร์ม ย้อนกลับ หรือไปที่หน้าถัดไปของแบบฟอร์ม

กลุ่มปุ่มแนวนอน

หากคุณต้องการให้ปุ่มปรากฏเคียงข้างกัน คุณต้องสร้างกลุ่มปุ่ม CSS คุณสามารถสร้างกลุ่มปุ่มโดยลอยปุ่มที่คุณต้องการให้ปรากฏในกลุ่มของคุณไปทางซ้าย คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติ CSS float ในคู่มือ CSS float ของเรา ต่อไปนี้คือตัวอย่างโค้ดสำหรับกลุ่มปุ่มแนวนอน

index.html

<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>

styles.css

.button {
background-color: #ffb6c1;
	color: black;
	padding: 25px;
  	border: none;
	float: left;
}

รหัสของเราส่งคืน:

อย่างที่คุณเห็น เราสร้างปุ่มสามปุ่ม สิ่งเหล่านี้ปรากฏขึ้นเคียงข้างกัน

ในทำนองเดียวกัน เราสามารถระบุคุณสมบัติ border CSS เพื่อสร้างกลุ่มของปุ่มที่แต่ละปุ่มมีเส้นขอบของตัวเอง นี่คือรหัสที่เราสามารถใช้เพื่อสร้างกลุ่มปุ่มที่มีเส้นขอบ:

index.html

<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>

styles.css

.button {
background-color: #ffb6c1;
	color: black;
	padding: 25px;
  	border: 2px solid blue;
	float: left;
}

รหัสของเราส่งคืน:

ในโค้ดของเรา เราได้ระบุเส้นขอบสีน้ำเงินทึบ 2px รอบปุ่มแต่ละปุ่มของเรา ซึ่งช่วยให้เราแยกแยะแต่ละปุ่มในกลุ่มได้อย่างชัดเจน

กลุ่มปุ่มแนวตั้ง

บ่อยครั้งเมื่อคุณออกแบบกลุ่มปุ่ม คุณอาจต้องการให้ปุ่มปรากฏในแนวตั้ง นั่นคือที่มาของคุณสมบัติ display:block CSS

นี่คือตัวอย่างที่ใช้ display:block เพื่อแสดงปุ่มในกลุ่มปุ่ม CSS ในแนวตั้ง:

index.html

<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>

styles.css

.button {
background-color: #ffb6c1;
	color: black;
	padding: 25px;
  	border: 2px solid blue;
display: block;
}

รหัสของเราส่งคืน:

เว็บเบราว์เซอร์ของเราจัดกลุ่มปุ่มเหล่านี้ไว้ด้วยกันและแสดงปุ่มเหล่านี้ในแนวตั้ง

ปุ่มเคลื่อนไหว

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

กด

ใน CSS คุณสามารถสร้างเอฟเฟกต์ที่ทำให้ดูเหมือนว่ามีการกดปุ่มเมื่อผู้ใช้คลิก

ตัวอย่างเช่น สมมติว่าคุณต้องการให้ปุ่มสีฟ้าอ่อนที่มีเงาสีเทาเข้มเปลี่ยนเป็นสีชมพูและมีเงาสีเทาอ่อน 0.5 วินาทีหลังจากที่ผู้ใช้คลิก ซึ่งจะทำให้ผู้ใช้รู้สึกว่ากำลังกดปุ่มอยู่จริง นี่คือรหัสที่คุณสามารถใช้เพื่อทำงานนี้ให้สำเร็จ:

index.html

<button class="button">Click me</button>

styles.css

.button {
   padding: 20px;
   font-size: 15px;
   color: white;
   background-color: lightblue;
   border: none;
   transition-duration: 0.5s;
   border-radius: 8px;
   box-shadow: 0 5px gray;
}

.button:active {
  background-color: #ffb6c1;
  box-shadow: 0 5px lightgray;
  transform: translateY(5px);
}

นี่คือผลลัพธ์ของรหัสของเรา:

ทางด้านซ้าย คุณจะเห็นว่าปุ่มของเราปรากฏอย่างไรก่อนที่จะคลิก ปุ่มเป็นสีน้ำเงินอ่อนและมีเงากล่องสีเทาเข้ม ทางด้านขวา คุณจะเห็นลักษณะที่ปรากฏของปุ่มของเราหลังจากที่คลิกแล้ว (และหลังจากผ่านระยะเวลาการเปลี่ยนแปลงที่ระบุ) ปุ่มนี้มีพื้นหลังสีชมพูและเงากล่องสีเทาอ่อน

มาทำลายรหัสของเรากัน ในสไตล์ .button ของเรา เรา:

• สร้างช่องว่างภายใน 20px รอบปุ่มของเรา
• กำหนดขนาดตัวอักษรของข้อความบนปุ่มของเราเป็น 15px
• กำหนดสีของข้อความบนปุ่มของเราให้เป็นสีขาว
• ตั้งค่าสีของปุ่มของเราให้เป็นสีฟ้าอ่อน
• ลบเส้นขอบเริ่มต้นรอบปุ่มของเรา
• กำหนดระยะเวลาของการเปลี่ยนโฮเวอร์ของเราเป็น 0.5 วินาที
• กำหนดรัศมีเส้นขอบเป็น 8px ซึ่งจะสร้างมุมโค้งมนสำหรับปุ่มของเรา
• ตั้งค่าเงากล่องสีเทาที่ยาว 5px และปรากฏใต้ปุ่มของเรา

สิ่งเหล่านี้กำหนดรูปแบบสำหรับปุ่มของเราเมื่อผู้ใช้ไม่ได้วางเคอร์เซอร์ไว้เหนือปุ่ม ใน .button:active style เรา:

• ตั้งค่าสีพื้นหลังของปุ่มให้เป็นสีชมพูอ่อน
• ตั้งค่าเงาสีเทาอ่อนที่ยาว 5px และปรากฏใต้ปุ่มของเรา
• ตั้งค่าการแปลง translateY() ซึ่งทำให้ปุ่มของเราดูเหมือนถูกกด คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการเปลี่ยนแปลงนี้ได้ในคู่มือการแปลง Career Karma CSS 2D

สไตล์เหล่านี้ช่วยให้เราสร้างเอฟเฟกต์ที่ทริกเกอร์เมื่อผู้ใช้วางเมาส์เหนือปุ่ม

เฟดอิน

เราสามารถใช้คุณสมบัติทรานซิชันและความทึบเพื่อสร้างเอฟเฟกต์เฟดอินบนปุ่มได้ เมื่อรวมกับตัวเลือก :โฮเวอร์ เอฟเฟกต์เฟดอินจะเปิดใช้งานเมื่อผู้ใช้วางเมาส์เหนือวัตถุ ซึ่งในกรณีนี้คือปุ่ม

นี่คือรหัสที่เราสามารถใช้เพื่อสร้างปุ่มเฟดอิน:

.button {
   padding: 20px;
   font-size: 15px;
   color: white;
   background-color: lightblue;
   border: none;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
   border-radius: 8px;
   opacity: 0.7;
}

.button:hover {
  opacity: 1;
}

นี่คือผลลัพธ์ของรหัสของเรา:

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

หลังจากที่ผู้ใช้วางเมาส์เหนือปุ่ม เนื้อหาของคุณสมบัติ .button:hover CSS จะถูกอ่าน ซึ่งตั้งค่าความทึบของปุ่มเป็น 1 ซึ่งจะทำให้ปุ่มของเรามีความทึบเต็มที่ (ไม่โปร่งใส)

บทสรุป

HTML กำหนดโครงสร้างของปุ่มบนหน้าเว็บ เมื่อคุณกำหนดปุ่มแล้ว คุณสามารถใช้ CSS เพื่อปรับแต่งปุ่มได้ตามความต้องการของคุณ

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