วิธีสร้างปุ่ม CSS3 ที่สวยงามโดยไม่ต้องเข้ารหัส

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

การสร้างปุ่มตั้งแต่เริ่มต้น โดยเฉพาะอย่างยิ่งเมื่อพิจารณาถึงฟังก์ชันการทำงานข้ามเบราว์เซอร์ ไม่ใช่เรื่องง่าย ผู้ที่คุ้นเคยกับ HTML, CSS รู้ดีว่าการสร้างปุ่ม CSS3 ที่สวยงามนั้นยากเย็นเพียงใด ต้องขอบคุณปลั๊กอิน WordPress CMS และ MaxButtons WordPress คุณจะแสดงปุ่มที่สวยงามที่สุดบางส่วนบนเว็บไซต์ของคุณ

เมื่อใช้ MaxButtons เราสามารถสร้างปุ่ม CSS3 ได้โดยไม่ต้องแตะโค้ดแม้แต่บรรทัดเดียว

เราจะเริ่มต้นด้วยการติดตั้งปลั๊กอินจากส่วนผู้ดูแลระบบเว็บไซต์ WordPress หากคุณต้องการดาวน์โหลดไฟล์ ให้ดาวน์โหลดไฟล์จากหน้าปลั๊กอิน WordPress ของผู้เขียนที่นี่

Maxbutton คืออะไร?

Maxbuttons เป็นปลั๊กอิน WordPress ที่ยอดเยี่ยมที่เปิดใช้งานปุ่มหนึ่งเพื่อสร้างปุ่ม CSS3 ที่น่าทึ่งซึ่งคุณสามารถเพิ่มลงในเพจ โพสต์ หรือแม้แต่วิดเจ็ตบนเว็บไซต์ WordPress ของคุณโดยไม่ต้องแตะโค้ดแม้แต่บรรทัดเดียว แน่นอนว่าฉันต้องเพิ่ม – เว้นแต่ ถ้าคุณต้องการ.

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

คุณสมบัติหลักของปลั๊กอิน

• ใช้งานง่าย ไม่จำเป็นต้องมีทักษะการเขียนโปรแกรม
• รหัสย่อของปุ่มที่สามารถวางไว้ที่ใดก็ได้ในเนื้อหาของคุณ ไม่ว่าจะเป็นหน้า โพสต์ หรือแม้แต่วิดเจ็ต
• สร้างปุ่ม CSS3 ได้ไม่จำกัดจำนวน
• ใช้งานได้กับเบราว์เซอร์ที่ทันสมัยทั้งหมดในขณะที่เข้ากันได้กับส่วนที่เหลือ
• ปุ่มที่นำกลับมาใช้ใหม่ได้ เพื่อเป็นพื้นฐานในการสร้างผู้อื่น
• สอดคล้องกับ CSS3 อย่างสมบูรณ์กับการแรเงาข้อความ, การแรเงากล่อง, การไล่ระดับสี ฯลฯ
• ตัวเลือกสีสำหรับการผสมสีแบบไม่จำกัด
• ดูปุ่มของคุณบนพื้นหลังสีต่างๆ
• ท่ามกลางคนอื่น ๆ อีกมากมาย

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

1.จากเมนูผู้ดูแลระบบด้านซ้าย คลิก MaxButtons แล้วคลิก เพิ่มใหม่

2. หรือคุณสามารถคลิก ปุ่ม และเพิ่มใหม่ จากแดชบอร์ดของปุ่ม ก่อนที่คุณจะสร้างปุ่มแรก คุณจะมี 3 ปุ่มที่คุณสามารถคลิกเพื่อสร้างปุ่ม CSS3 ใหม่ได้ คลิกเพิ่มใหม่

3. ในหน้าจอถัดไป ใช้ตัวแก้ไข สร้างและปรับแต่งปุ่ม CSS3 ตามที่คุณต้องการ

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

แต่ในขณะที่คุณทดลอง คุณสามารถดูตัวอย่างสิ่งที่คุณทำและปรับตามความชอบของคุณต่อไปได้

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

4.ตรวจสอบให้แน่ใจว่าคุณคลิกบันทึกเมื่อเสร็จแล้ว

การแทรกปุ่ม CSS3 ลงในเนื้อหา

1.คัดลอกรหัสย่อของปุ่มสำหรับปุ่มที่คุณสร้างขึ้นด้านบน

2. วางรหัสย่อนี้ไว้ที่ใดก็ได้ในหน้า โพสต์ หรือวิดเจ็ต แล้วปุ่มควรปรากฏที่นั่น

3.Maxbuttons มาพร้อมกับคุณสมบัติที่ยอดเยี่ยมเป็นพิเศษ

ความสามารถในการนำปุ่ม CSS3 ที่คุณสร้างขึ้นมาใช้ซ้ำโดยไม่ต้องผ่านกระบวนการเดียวกัน

นี่เป็นเรื่องปกติของเว็บไซต์ที่มีความสม่ำเสมอเป็นสิ่งสำคัญ

มีสองวิธีในการใช้ปุ่ม CSS3 ซ้ำ

1.ขั้นแรก เมื่อคุณสร้างโพสต์หรือเพจด้วยโปรแกรมแก้ไขภาพ ให้คลิก MB

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

ในแบบฟอร์มป๊อปอัป ให้คลิกปุ่มที่คุณต้องการเพิ่มลงในเนื้อหาของคุณ

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

เมื่อคุณกำหนดตัวเลือกเสร็จแล้ว ให้คลิก แทรกปุ่มลงในตัวแก้ไข

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

2. เส้นทางอื่นในการเพิ่มปุ่มด้วยรหัสย่อกำลังส่งพารามิเตอร์ไปยังรหัสย่อ

นี่คือพารามิเตอร์ที่คุณสามารถใช้เพื่อสร้างปุ่ม css3 ด้วยการออกแบบที่ได้ทำไว้

• เพิ่มปุ่มโดยใช้ชื่อปุ่ม [maxbutton name=”Contact Us”]
• ปุ่มเดียวกันกับลิงค์อื่น [maxbutton id=”1″ url=”http://yoururl”]
• ปุ่มเดียวกันกับข้อความต่างกัน [maxbutton id=”1″ text=”yourtext”]
• ตัวเลือกรหัสย่อ ที่เป็นไปได้ทั้งหมด [maxbutton id=”1″ text=”yourtext” url=”http://yoururl” linktitle=”tooltip” window=”new” nofollow=”true”]

ให้เราแรเงาแสงและทำความเข้าใจกับพารามิเตอร์เหล่านี้

Maxbutton id – คุณรู้ว่านี่คือรหัสเฉพาะที่กำหนดเมื่อคุณสร้างปุ่ม css3 ด้วย Maxbutton

ข้อความ – เป็นข้อความตามที่จะแสดงบนปุ่มบนปุ่ม

URL – คือลิงก์ไปยังหน้าหรือเว็บไซต์ที่ผู้ใช้จะถูกเปลี่ยนเส้นทางไปเมื่อคลิกปุ่ม

ชื่อลิงก์ – เมื่อมีคนวางเมาส์เหนือปุ่ม คำแนะนำเครื่องมือจะปรากฏขึ้น คุณตั้งค่าข้อความที่นี่

หน้าต่าง – โดยค่าเริ่มต้น ปุ่มจะเปิดหน้าเป้าหมายในหน้าต่างปัจจุบัน เมื่อคุณส่งพารามิเตอร์ window=” new” ไปยังรหัสย่อของคุณ URL จะถูกเปิดในหน้าต่างใหม่เมื่อคลิกปุ่ม

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

เมื่อเสร็จแล้ว เนื้อหาของเราควรแสดงปุ่มต่างๆ

ด้วยปลั๊กอิน Maxbutton WordPress คุณสามารถสร้างปุ่ม CSS3 ที่สวยงามโดยไม่ต้องมีความรู้ด้านเทคนิคเกี่ยวกับการเข้ารหัส - ปุ่มที่เพียงพอสำหรับการเรียกร้องให้ดำเนินการใด ๆ ที่คุณต้องการเพิ่มลงในเนื้อหาของคุณ

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

หากคุณกำลังซื้อปลั๊กอินเพื่อใช้งาน การพิจารณาปลั๊กอินอื่น ๆ ถือเป็นการรอบคอบเท่านั้น นี่คือปลั๊กอินอีกสองสามตัว

1. ปุ่ม ย่อและวิดเจ็ต
2. ลืม ปุ่มรหัสย่อ ไปได้เลย นั่นคือปุ่มสร้าง CSS3 ภายในหน้าของคุณหรือโพสต์โดยไม่ต้องใช้รหัสย่อ

หวังว่านี่จะช่วยให้คุณสร้างปุ่ม CSS3 ได้อย่างง่ายดาย คุณอาจต้องการเรียนรู้วิธีสร้างวิดเจ็ตจดหมายข่าว/สมัครสมาชิกสำหรับไซต์ WordPress ของคุณ