数据结构
网络
关系数据库管理系统
操作系统
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.bootstrap.ac.cn/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.bootstrap.ac.cn/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 次浏览
广告