9 个自定义 CSS 和 JavaScript 社交分享按钮

已发表: 2021-04-18

每个网站都应该包含一些社交按钮，以增加网络上的共享。但是默认的共享按钮并不是那么好，并且它们的样式根据网络的品牌而有所不同。

这就是为什么我们策划了这个小集合的自定义共享按钮，您可以在自己的网站上格式化和重复使用。如果您正在寻找漂亮的共享按钮，这些模板提供了一个很好的起点。

1. 侧面分享

首先是开发人员 Michael Schofield 创建的我最喜欢的技术之一。这种固定的侧面共享社交徽章 UI 在大型博客和杂志网站上非常常见。

这些社交徽章可以保持在标题附近的最顶部，也可以随着用户向下滚动。我还没有找到任何比较差异的案例研究，但我想固定按钮确实看到更高的共享计数。无论哪种方式，它们的设计都非常好，以至于它们看起来不像垃圾邮件或被硬塞到布局中。

如果您运行博客并想要一些自定义共享徽章，这可能是最好的模板。

另一种流行的分享方式是重新发布在网站上找到的图片。这在 Pinterest 中很受欢迎，但也适用于 Facebook 和 Twitter，甚至 Google+。

这些图像按钮是使用纯 CSS3 和一些背景徽标的自定义设计。他们还没有连接到任何社交网络，但锚链接可以很容易地被编程为社交分享。

设计真的是我在这里的重点，因为它们看起来非常适合任何图像。此外，该位置确实让人觉得您试图鼓励分享图像本身，而不仅仅是帖子。

我们都见过那些使用小共享图标和弹出菜单的 WordPress 共享小部件。一段时间后，它们可能会变得陈旧，因此将其混合一下会有所帮助。

使用此代码段，您可以使用自定义动画和隐藏菜单重新设计您的社交分享。对于希望鼓励跨多个网络进行大量共享的网站的任何人来说，它都是完美的选择。

每个图标都是用纯 CSS 设计的，动画是通过 jQuery 控制的。您应该能够将其复制/粘贴到任何布局中并使其正常工作。它非常适合紧挨文章标题，甚至在人们阅读完后放在底部。无论哪种方式，它肯定会全面增加社会份额。

要获得一些有趣的动画，请查看 Stephane Lyver 创建的这些圆形按钮。

每个按钮都有自己的悬停动画效果，它们都可以完美地融入任何布局。您甚至可以更改背景和图标颜色，使它们在纯白色背景中脱颖而出。

整个事情在纯 CSS 上运行，图标是通过 Bootstrap 从 Font Awesome 中提取的。

请注意，这些按钮也不会直接连接到社交共享链接，但可以使用正确的代码轻松修复。

简短、甜美且最准确地描述了这些共享按钮。

他们使用 Ionicons 图标集中的简单 SVG 图标。但是你不需要 Ionic 或任何 JavaScript 来让这些工作。

相反，他们使用href值和新选项卡选项在浏览器中打开共享链接。不需要 JavaScript，不需要笨重的 SVG。

如果您深入研究 Ionic 图标集，您甚至可以找到您可能想要添加的其他社交图标。此外，您可以完全控制 CSS 中的样式，因此您可以更改大小、填充、字体颜色以及几乎所有其他内容。

开发人员 Chris Sevilleja 使用纯 CSS 创建了这些隐藏的社交按钮。

一些网站使用这种技术将默认共享徽章嵌入到较小的图标中。但不可否认，这是一个独特的动画，所以它不是一个超级普遍的趋势。

该代码非常易于设置，并且全部通过 CSS 运行，因此您可以完全控制。克里斯甚至为 Google+ 社交徽章开发了类似的笔。

这两个代码片段对于几乎任何网站都非常有用，并且动画可以在所有兼容 CSS3 的浏览器中运行。

现在这是一个非常独特的社交共享设置，其中背景颜色会根据您悬停的按钮而变化。

每个按钮都有从 Font Awesome 中提取的自己的自定义图标，因此您甚至可以扩展此集以包含其他相关图标。我也非常喜欢这种方法，因为它确实具有用于悬停更改的 JavaScript 后备。

但是 Web 开发人员 Christopher Grabinski 创建了一个完全一样的纯 CSS 替代方案（在支持的浏览器中）。

我认为这种技术在较大的博客上看起来不太好，尽管它可能适用于较小的网站或简短的博客文章。

开发人员 Kyle Lavery 构建了一个令人惊叹的弹出式共享按钮，让人想起 Google 的材质弹出式方法。

这确实使用了一点 JavaScript，但它只有 5 行并且不是很复杂。动画魔法在 CSS 中，您可以根据自己的需要进行自定义。

有趣的是原始 HTML 非常简单。它有一个主要的共享容器，然后使用div元素作为按钮。基本上是 5 行 HTML 和 5 行 JavaScript，再加上一大堆 CSS，给你这个可爱的效果。

绝对是我见过的最酷的社交分享功能之一，而材料设计风格让它更酷。

我收藏的最后一个是这个使用 CSS 3D 转换和社交按钮的 3D 设计。

开发人员 Fabrizio Bianchi 使用纯 CSS 从图标到变换动画创建了这些按钮。主要图标来自 Font Awesome，唯一的 JS 代码用于将按钮嵌入其中。

但总的来说，这是一个纯 CSS 解决方案，应该适用于任何网站。不是每个人都喜欢 3D 效果，但如果它适合您的设计，那就去吧。