โค้ดต่อไปนี้เป็นการจัดสไตล์ Social Media Buttons ด้วย CSS
ตัวอย่าง
<!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> button { margin: 0px; border-radius: 50%; width: 120px; height: 120px; border: none; padding: 15px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; font-size: 40px; border:1px solid black; } button:nth-of-type(1){ margin-left: 40%; } button:hover { background: black; box-shadow: 5px 10px 18px rgb(20, 20, 20); } </style> </head> <body> <h1 style="text-align: center;">Social Media Buttons Example</h1> <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> </body> </html>ผลลัพธ์
โค้ดข้างต้นจะสร้างผลลัพธ์ดังนี้
เมื่อ Hover ที่ไอคอนใดๆ
