資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 樣式化社交媒體按鈕？
在網頁上，您一定見過 Facebook、Twitter、Gmail 等社交媒體按鈕。我們可以使用 CSS 輕鬆設計此類按鈕。為此，您還需要設定社交媒體圖示。圖示使用 <i> 元素放置在按鈕上。讓我們看看如何使用 CSS 樣式化社交媒體按鈕。
設定社交媒體圖示的 CDN
為了在網頁上的按鈕上新增圖示，我們使用了 Font Awesome 圖示。使用 <link> 元素將其包含在網頁中 -
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
設定社交媒體按鈕
我們使用 <button> 元素設定了三個按鈕 -
<button><i class="fa fa-facebook-f" style="color:#3B5998"></i></button> <button><i class="fa fa-twitter" style="color:#55ACEE"></i></button> <button><i class="fa fa-linkedin" style="color:#007bb5"></i></button>
在按鈕上設定圖示
圖示使用 <i> 元素放置在按鈕上。<i> 新增到 <button> 元素下。<i> 包含 Facebook、Twitter 和 LinkedIn 的 Font Awesome 圖示 -
<button> <i class="fa fa-facebook-f" style="color:#3B5998"></i> </button>
對於 Facebook，設定以下圖示 -
fa fa-facebook-f
對於 Twitter，設定以下圖示 -
fa fa-twitter
對於 LinkedIn，設定以下圖示 -
fa fa-linkedin
樣式化社交媒體按鈕
按鈕使用 border-radius 屬性進行樣式化。這將使按鈕變圓。按鈕的高度和寬度分別使用 height 和 width 屬性設定 -
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;
}
懸停社交媒體按鈕
：hover 選擇器用於在懸停按鈕時設定屬性 -
button:hover {
background: black;
box-shadow: 5px 10px 18px rgb(20, 20, 20);
}
示例
以下是使用 CSS 樣式化社交媒體按鈕的程式碼 -
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" 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: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-twitter" style="color:#55ACEE"></i></button>
<button><i class="fa fa-linkedin" style="color:#007bb5"></i></button>
</body>
</html>
更新於: 2023-12-21
502 次瀏覽
廣告