สร้างแถบไอคอนโซเชียลมีเดียติดขอบซ้าย (Fixed Sidebar) คงที่ขณะเลื่อนหน้า ใช้ Font Awesome Icons และ Button Group แนวตั้ง
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" /> <style> *, *::before, *::after { box-sizing: border-box; } main { margin-left: 300px; } .SocialBar { position: fixed; display: block; top: 30%; font-size: 0; width: 200px; border: 2px solid darkgreen; box-shadow: 5px 10px 18px rgb(55, 173, 39); } button { display: block; width: 100%; margin: 0px; border: none; padding: 15px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; font-size: 20px; } button:not(:last-child) { border-bottom: 2px solid rgb(6, 134, 49); } button:hover { background: black; box-shadow: 5px 10px 18px rgb(20, 20, 20); } </style> </head> <body> <div class="SocialBar"> <button><i class="fa fa-facebook-f" style="color:#3B5998"></i></button> <button><i class="fa fa-hashtag" style="color:#55ACEE"></i></button> <button><i class="fa fa-linkedin" style="color:#007bb5"></i></button> </div> <main> <h1>Social Media Links</h1> <h2>Hover over the above links to see hover effects</h2> <h2>Visit us on any of the above social media</h2> <h3>Lorem ipsum...</h3> </main> </body> </html>
โครงสร้าง
- main { margin-left: 300px; } - เนื้อหาหลักเว้นซ้าย 300px (กว้าง SocialBar + เผื่อ)
- .SocialBar { position: fixed; top: 30%; width: 200px; } - ติดซ้าย กลางจอแนวตั้ง
- button { display: block; width: 100%; } - ปุ่มเต็มความกว้าง เรียงแนวตั้ง
- font-size: 0 - กำจัดช่องว่างระหว่าง Inline elements
- ไอคอน: Facebook (#3B5998), Twitter/Hashtag (#55ACEE), LinkedIn (#007bb5)
Hover Effect
Hover ปุ่ม -> พื้นหลังดำ เงาสีดำ ตัวอักษร/ไอคอนยังคงสีแบรนด์
ผลลัพธ์
แถบซ้ายกว้าง 200px ติดขอบซ้าย กลางจอ 3 ปุ่มไอคอนโซเชียล Hover -> ดำ เงา
