ปุ่มแชร์โซเชียล CSS และ JavaScript ที่กำหนดเอง 9 ปุ่ม

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

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

1. การแบ่งปันด้านข้าง

อย่างแรกคือหนึ่งในเทคนิคที่ฉันโปรดปรานซึ่งสร้างขึ้นโดยนักพัฒนา Michael Schofield UI ป้ายโซเชียลการแชร์ด้านข้างแบบตายตัวนี้พบได้ทั่วไปในบล็อกขนาดใหญ่และไซต์นิตยสาร

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

นี่อาจเป็นเทมเพลตที่ดีที่สุดหากคุณเปิดบล็อกและต้องการป้ายการแชร์แบบกำหนดเอง

2. ปุ่มรูปภาพ

รูปแบบการแชร์ยอดนิยมอีกรูปแบบหนึ่งคือการรีโพสต์รูปภาพที่พบในเว็บไซต์ สิ่งนี้เป็นที่นิยมใน Pinterest แต่สามารถทำงานได้ดีบน Facebook และ Twitter และแม้แต่ Google+ เช่นกัน

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

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

3. สลับการแชร์

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

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

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

4. แอนิเมชั่นวงกลม

สำหรับแอนิเมชั่นสนุกๆ ลองดูปุ่มวงกลมเหล่านี้ที่สร้างโดย Stephane Lyver

แต่ละปุ่มมีเอฟเฟกต์โฮเวอร์-to-animate ของตัวเอง และสามารถผสมผสานอย่างลงตัวกับเลย์เอาต์ใดก็ได้ คุณยังสามารถเปลี่ยนสีพื้นหลังและไอคอนเพื่อให้ดูโดดเด่นกว่าพื้นหลังสีขาวธรรมดาได้อีกด้วย

สิ่งทั้งหมดทำงานบน CSS ล้วนๆ และไอคอนถูกดึงมาจาก Font Awesome ผ่าน Bootstrap

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

5. ปุ่มแชร์อย่างง่าย

สั้น ไพเราะ และตรงประเด็นอธิบายปุ่มแบ่งปันเหล่านี้ได้ดีที่สุด

พวกเขาใช้ไอคอน SVG อย่างง่ายจากชุดไอคอน Ionicons แต่คุณไม่จำเป็นต้องมี Ionic หรือ JavaScript เพื่อให้สิ่งเหล่านี้ทำงาน

แต่พวกเขาใช้ค่า href พร้อมกับตัวเลือกแท็บใหม่เพื่อเปิดลิงก์การแชร์ในเบราว์เซอร์โดยตรง ไม่จำเป็นต้องใช้ JavaScript ไม่จำเป็นต้องใช้ SVG ที่เกะกะ

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

6. โซเชียลที่ซ่อนอยู่

นักพัฒนา Chris Sevilleja ได้สร้างปุ่มโซเชียลที่ซ่อนอยู่เหล่านี้ด้วย CSS ล้วนๆ

บางเว็บไซต์ใช้เทคนิคนี้เพื่อฝังป้ายการแชร์เริ่มต้นไว้ในไอคอนขนาดเล็ก แต่เป็นที่ยอมรับว่านี่เป็นแอนิเมชั่นที่ไม่เหมือนใคร ดังนั้นจึงไม่ใช่เทรนด์ธรรมดาทั่วไป

โค้ดนี้ติดตั้งง่ายจริง ๆ และทั้งหมดทำงานผ่าน CSS ดังนั้นคุณจึงสามารถควบคุมได้อย่างเต็มที่ คริสได้พัฒนาปากกาที่คล้ายกันสำหรับตรา Google+ โซเชียล

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

7. เลื่อนสีพื้นหลัง

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

แต่ละปุ่มจะมีไอคอนแบบกำหนดเองที่ดึงมาจาก Font Awesome ดังนั้นคุณจึงสามารถขยายชุดนี้เพื่อรวมไอคอนอื่นๆ ที่เกี่ยวข้องได้ ฉันชอบแนวทางนี้มากเพราะมันมี JavaScript ทางเลือกสำหรับการเปลี่ยนแปลงโฮเวอร์

แต่นักพัฒนาเว็บ Christopher Grabinski ได้สร้างทางเลือก CSS บริสุทธิ์ที่ทำงานเหมือนกันทุกประการ (ในเบราว์เซอร์ที่รองรับ)

ฉันไม่คิดว่าเทคนิคนี้จะดูดีในบล็อกขนาดใหญ่ แม้ว่ามันอาจจะใช้ได้กับไซต์ขนาดเล็กหรือโพสต์บล็อกสั้นๆ

8. การแบ่งปันแบบลอยตัว

นักพัฒนาซอฟต์แวร์ Kyle Lavery ได้สร้างปุ่มแชร์ Flyout ที่น่าทึ่งซึ่งชวนให้นึกถึงแนวทางของ Google เกี่ยวกับ flyouts ที่เป็นวัสดุ

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

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

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

9. ปุ่มแชร์ 3 มิติ

สุดท้ายในคอลเลกชันของฉันคือการออกแบบ 3 มิตินี้โดยใช้การแปลง CSS 3D ควบคู่ไปกับปุ่มโซเชียล

นักพัฒนา Fabrizio Bianchi ได้สร้างปุ่มเหล่านี้โดยใช้ CSS ล้วนๆ ตั้งแต่ไอคอนไปจนถึงแอนิเมชั่นการแปลง ไอคอนหลักมาจาก Font Awesome และโค้ด JS เดียวสำหรับการฝังปุ่มต่างๆ ภายใน

แต่โดยรวมแล้วนี่เป็นโซลูชัน CSS ล้วนๆ ที่ควรทำงานได้ดีกับทุกไซต์ ไม่ใช่ทุกคนที่ชอบเอฟเฟกต์ 3D แต่ถ้ามันเหมาะกับการออกแบบของคุณก็ลุยเลย