เป็นโค้ด HTML และ CSS ที่ใช้สร้างปุ่มที่สามารถปรับขนาดของเนื้อหาภายในได้ตามขนาดของปุ่ม โดยใช้ @container queries เพื่อควบคุมการแสดงผลของข้อความและไอคอนในปุ่ม โค้ดจะมีการทำงานดังนี้:
HTML:
<button class="discover-btn">
ค้นพบ <span>→</span>
</button>
โครงสร้าง HTML ประกอบด้วย <div> ที่มีคลาส button-container ซึ่งภายในมีลิงก์ (<a>) ที่มีคลาส button ภายในลิงก์มี <span> สองตัว คือ button-text สำหรับข้อความ “Discover” และ button-icon สำหรับแสดงไอคอน “…”
CSS:
.discover-btn {
background-color: #a8df94; /* พื้นหลังสีเขียวอ่อน */
color: #000000; /* สีข้อความสีดำ */
border: 2px solid #000000; /* เส้นขอบสีดำ */
border-radius: 10px; /* มุมโค้งมน */
padding: 10px 20px; /* ระยะห่างภายในปุ่ม */
font-size: 18px; /* ขนาดข้อความ */
font-family: Arial, sans-serif; /* ฟอนต์ */
display: flex;
align-items: center;
gap: 10px;
cursor: pointer; /* เปลี่ยนเคอร์เซอร์เป็นรูปมือเมื่อเลื่อนเมาส์ผ่าน */
transition: background-color 0.3s ease;
}
.discover-btn span {
display: inline-block;
font-size: 24px; /* ขนาดลูกศร */
}
.discover-btn:hover {
background-color: #95d77a; /* สีเขียวเข้มขึ้นเมื่อเอาเมาส์ไปวางบนปุ่ม */
}
อธิบายการทำงาน:
อธิบาย:
- การจัดแต่งปุ่ม (
.discover-btn):- พื้นหลัง: สีเขียวอ่อน (
#a8df94). - สีข้อความและขอบ: เป็นสีดำทั้งคู่ (
#000000). - มุมโค้ง: ใช้
border-radiusเป็น10pxเพื่อทำให้มุมโค้ง. - การใช้ Flexbox: ใช้เพื่อจัดเรียงข้อความและลูกศรให้ตรงกลาง พร้อมเว้นระยะห่างเล็กน้อย.
- พื้นหลัง: สีเขียวอ่อน (
- ลูกศร (
span):- ลูกศรทางขวา (
→) ถูกจัดให้มีขนาดใหญ่ขึ้น.
- ลูกศรทางขวา (
- เอฟเฟ็กต์เมื่อเอาเมาส์ไปวาง (
hover):- เมื่อเลื่อนเมาส์ผ่านปุ่ม พื้นหลังจะเปลี่ยนเป็นสีเขียวเข้มขึ้น (
#95d77a).
- เมื่อเลื่อนเมาส์ผ่านปุ่ม พื้นหลังจะเปลี่ยนเป็นสีเขียวเข้มขึ้น (
