CSS按钮-社交按钮可用样式

在网站中添加社交按钮是非常常见的事情，例如分享文章到Twitter或者Facebook，所以设计好看且易于使用的社交按钮是非常重要的。在这里我们将介绍一些常用的CSS按钮-社交按钮可用样式。

按钮样式

我们首先需要定义一个按钮样式，这里我们使用 button 元素来定义。下面是一个简单的按钮样式：

button {
  border: none;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  background-color: #4CAF50;
  color: #fff;
  transition: background-color .3s ease;
}

这个按钮样式有以下特点：

• 无边框
• 字体大小为16px
• 内边距为12px和24px
• 边角为4px
• 光标形状为手指
• 背景色为#4CAF50
• 文本颜色为白色
• 有过渡效果，背景色将在0.3秒内变化

悬停样式

当鼠标悬停在按钮上时，我们可以使用 :hover 伪类添加一些样式。下面是悬停时的样式：

button:hover {
  background-color: #3e8e41;
}

这个悬停样式将背景色更改为#3e8e41。

点击样式

当按钮被点击时，我们可以使用 :active 伪类添加一些样式。下面是点击时的样式：

button:active {
  background-color: #2980B9;
}

这个点击样式将背景色更改为#2980B9。

社交按钮

现在我们可以使用以上按钮样式来创建社交按钮。首先需要添加一些社交图标，这里我们将使用 Font Awesome。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

现在我们可以创建一个 Twitter 分享按钮：

<button class="twitter">
  <i class="fab fa-twitter"></i> Tweet
</button>

接下来我们将应用之前定义的按钮样式。为了通过 CSS 将按钮样式应用于特定按钮，我们需要使用类选择器。下面是 Twitter 分享按钮的样式：

.twitter {
  background-color: #1DA1F2;
}

.twitter:hover {
  background-color: #0a8ec4;
}

.twitter:active {
  background-color: #155b8f;
}

这个 Twitter 分享按钮将具有以下特点：

• 背景色为#1DA1F2
• 悬停时的背景色为#0a8ec4
• 点击时的背景色为#155b8f

现在我们仅仅创建了一个 Twitter 分享按钮，但是我们可以使用相同的方式来创建其他社交按钮，例如 Facebook、LinkedIn 等等。

结论

现在我们已经学习了如何创建CSS按钮-社交按钮可用样式。我们定义了一个按钮样式，并使用该样式创建了 Twitter 分享按钮。当然，我们可以使用相同的方法来创建其他社交按钮，例如 Facebook、LinkedIn 等等。

以上就是本次介绍的内容，希望对你理解如何创建漂亮的社交按钮有所帮助。