ปุ่ม เรียกร้องให้ดำเนินการ อย่างง่ายด้วย CSS & jQuery

คำกระตุ้นการตัดสินใจ ในการออกแบบเว็บเป็นคำที่ใช้สำหรับองค์ประกอบในหน้าเว็บที่เรียกร้องการกระทำจากผู้ใช้ (คลิก, การโฮเวอร์, ฯลฯ ) วันนี้เรากำลังจะไป สร้างปุ่มเรียกร้องให้ดำเนินการที่มีประสิทธิภาพและยอดเยี่ยมด้วย CSS และ jQuery ที่ดึงดูดความสนใจของผู้ใช้และดึงดูดให้เขาคลิก .

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

ดาวน์โหลดบทแนะนำ (.zip) หรือ การสาธิต

ส่วนที่ฉัน - สร้างภาพปุ่ม

ในส่วนแรกนี้เราจะแสดงวิธีสร้างภาพที่ต้องการด้วย Photoshop ในขั้นตอนง่าย ๆ เริ่มกันเลย.

สร้างเอกสาร Photoshop ใหม่ ด้วยความกว้าง 580px และความสูง 130px ไปที่ ดู > คู่มือใหม่ จากนั้นตั้งค่า ปฐมนิเทศ ไปยัง ตามแนวนอน และ ตำแหน่ง ถึง 65px.

สร้างคำแนะนำเพิ่มเติม; แต่ละอันสำหรับด้านบนด้านล่างซ้ายและขวา ภาพของคุณควรมีคำแนะนำต่อไปนี้เมื่อคุณทำเสร็จแล้ว:

ดูเหมือนว่าไกด์จะแบ่งผ้าใบของคุณออกเป็นครึ่งบนและส่วนล่าง เลือก เครื่องมือทรงกลมมน, ตั้งค่า รัศมี ถึง 5px และวาดรูปร่างเป็นรูปสี่เหลี่ยมผืนผ้าที่ครึ่งบนของผืนผ้าใบ.

เปลี่ยนสไตล์สำหรับ โอเวอร์เลย์ไล่ระดับสี และ ลากเส้น.

เลือก ชนิด เครื่องมือและประเภท “ดาวน์โหลด” เพราะเป็นข้อความตัวอย่างลงในกล่องที่คุณสร้างขึ้น จัดแนวข้อความให้ตรงกลางกึ่งกลางของกล่องและผลลัพธ์ของคุณควรมีลักษณะดังนี้:

เราเสร็จสิ้นการสร้างสถานะแรกของปุ่มดาวน์โหลด เถอะ สร้างกลุ่มใหม่ และย้ายเลเยอร์ทั้งหมดลงไป. ทำซ้ำกลุ่ม และวางตำแหน่งไว้ภายใต้กลุ่มแรก เราได้สร้าง.

ตรงไปที่กลุ่มที่ซ้ำกันและเปลี่ยน โอเวอร์เลย์ไล่ระดับสี และ ลากเส้น รูปแบบของกล่องสี่เหลี่ยมที่สองของเรา (กล่องที่ถูกวนรอบ) ด้วยการตั้งค่าต่อไปนี้:

เมื่อเลือกกลุ่มที่สองแล้วให้ใช้ ย้าย เครื่องมือในการย้ายกล่องสี่เหลี่ยมทั้งหมดลงไปที่ครึ่งหลังของผืนผ้าใบ.

แค่นั้นแหละ! เราเสร็จส่วนแรกแล้ว บันทึกภาพของคุณเป็น download.png และเริ่มแก้ไขโค้ดที่คุณชื่นชอบ.

ดาวน์โหลด PSD

ส่วนที่สอง - HTML

ขั้นตอนที่ 1 - เตรียมไฟล์ที่จำเป็น

สร้างโฟลเดอร์และตั้งชื่อ เราจะตั้งชื่อมัน jQueryCallToaction สำหรับบทช่วยสอนนี้ ภายใน jQueryCallToaction โฟลเดอร์สร้างไฟล์ / โฟลเดอร์ต่อไปนี้:

1. ไฟล์ HTML เปล่า, index.html
2. ไฟล์ CSS ว่างเปล่า, style.css
3. ไฟล์ JavaScript ว่างเปล่า, script.js
4. โฟลเดอร์ชื่อ "ภาพ"
5. สถานที่ download.png ภายใน ภาพ โฟลเดอร์.

ขั้นตอนที่ 2 - เชื่อมโยง index.html ด้วย CSS & JS

มาเชื่อมโยงของเรา CSS และ JavaScript ไปยัง index.html. วางไว้ข้างใน . เราเริ่มต้นด้วย ไฟล์ CSS:

จากนั้น jQuery เวอร์ชันล่าสุด จากที่เก็บ AJAX ไลบรารีของ Google:

และในที่สุดของเรา ไฟล์ JavaScript :

ตอนนี้เรา ควรมีลักษณะเช่นนี้:

ลองใส่รหัสสำหรับปุ่มของเราข้างใน แท็ก:

คำอธิบาย: เราได้สร้างย่อหน้าสำหรับปุ่มสองปุ่มแต่ละห่อด้วย ด้วยไฮเปอร์ลิงก์ ภายใน บรรทัด 1: class = "button1" ถูกวางไว้ภายใน , ในขณะที่บรรทัด 2: class = "button1" ถูกวางไว้ภายใน

 .button1 / * ปุ่มที่มี CSS เท่านั้น * / พื้นหลัง: url (images / download.png) 0 0; ความสูง: 65px; ความกว้าง: 580px; จอแสดงผล: บล็อก;  .button1: hover / * mouseOver * / background: url (images / download.png) 0 65px;  

 .button2, .button2 a background: url (images / download.png) 0 -65px; ความสูง: 65px; ความกว้าง: 580px; จอแสดงผล: บล็อก;  .button2 a background-position: 0 0;  

 $ (เอกสาร). ready (function () $ ('. button2 a'). hover (function () $ (this) .stop (). animate ('opacity': '0', 500); , function () $ (this) .stop (). animate ('opacity': '1', 500);););