CSS: สร้างปุ่มสวย ๆ ด้วย CSS ตอนที่ 1 ภาพรวมของโปรเจ็กต์

 วันนี้เรามาสร้างปุ่มสวย ๆ ด้วย CSS ล้วน ๆ กันดีกว่าค่ะ โปรเจ็กต์ของเราจะมีหน้าตาเป็นยังไง ลองดูวีดีโอด้านล่างได้เลยค่ะ 🙂

 

ภาพรวมของโปรเจ็กต์

วีดีโอประกอบโปรเจ็กต์

 

เรามาวิเคราะห์กันดูหน่อยนะคะว่า โปรเจ็กต์เล็ก ๆ นี้ประกอบไปด้วยอะไรบ้าง

 

 

พื้นหลัง

พื้นหลังจะเป็นการใช้ CSS ไล่เฉดสี จากสีฟ้าอ่อน ไปหาสีฟ้าเข็ม โดยเป็นการไล่สีจากทางซ้าย – ขวา และจาก บน-ล่าง

css-button-animation-1-1

ภาพที่ 1 พื้นหลัง

 

 

ปุ่ม

พฤติกรรมที่เกิดขึ้นกับปุ่ม มีดังต่อไปนี้

1. ถ้าเราไม่ทำอะไรกับปุ่ม ปล่อยไว้เฉย ๆ ปุ่มก็จะมีหน้าตา ดังภาพด้านล่าง ปุ่มนี้ถูกสร้างมาจาก tag <a> link ธรรมดานะคะ จะเห็นว่า CSS ช่วยทำให้มันมีความเป็นปุ่ม และมีความโค้งมนตามขอบทุกมุม

css-button-animation-1-2

ภาพที่ 2 ปุ่ม

 

2. เมื่อนำเมาส์ไปวางเหนือปุ่ม ปุ่มจะขยับขึ้นเล็กน้อย พร้อมกับมีการขยายตัวแบบจาง ๆ

css-button-animation-1-3

ภาพที่ 3 ปุ่ม hover

 

และมีเงาใต้ปุ่มนะ 🙂

css-button-animation-1-4

ภาพที่ 4 ปุ่ม hover

 

3. เมื่อคลิกที่ปุ่ม มันจะขับตัวลง เหมือนการกดปุ่มในชีวิตจริงเลยค่ะ และเงาจะลดขนาดลง ทำให้เหมือนมันถูกกดลงไปจริง ๆ

css-button-animation-1-5

ภาพที่ 5 ปุ่ม click

 

4. เมื่อนำเมาส์ออก ปุ่มจะขยายตัวเล็กน้อย และคืนสู่รูปแบบเดิม

css-button-animation-1-6

ภาพที่ 6 ปุ่ม hover

 

5. เมื่อเปิดเข้าสู่หน้าเว็บ การปรากฏตัวของปุ่มจะลอยมาจากด้านบน ลงด้านล่าง ในส่วนนี้ เราจะใช้ CSS Animation ในการทำค่ะ 🙂

css-button-animation-1-7

ภาพที่ 7 ปุ่ม CSS Animation

 

ในตอนต่อไป เราจะเราเริ่มต้นสร้างปุ่ม ด้วยการวางโครงสร้างของ HTML และ CSS กันนะคะ

แล้วพบกันค่ะ 🙂

 

 

Comments

comments

ธมนวรรณ มณีจันทร์

เป้าหมาย : "พัฒนาคุณภาพชีวิตผู้คน ผ่านการส่งมอบความรู้ ด้วยเทคโนโลยีที่ดีที่สุด" ... ประวัติ