css做三角形-分享10个漂亮的CSS按钮源码

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

翻译 | 网络后端开发

日文原版|

网页设计师不再需要依赖 Photoshop 来制作很酷的按钮。 通过使用 CSS3，您可以实现背景渐变、阴影和光泽/光泽效果。

1. 塑料按钮

地址：

这套按键设计简洁，有多种不同的颜色和尺寸，您可以轻松地重新设计它们。

有多种款式可供选择，大钥匙、小钥匙、小钥匙。 有默认键、禁用键以及设计为开关或标签的键行。 对于纯 CSS 解决方案，这是网络上最干净的按钮样式之一。

2.酷按钮

地址：

这是 FelipeMarcos 制作的一组超级酷的按钮，与前面的塑料按钮略有不同，但也很容易使用。 看上去并没有什么令人眼花缭乱的塑料设计，但是当你点击的时候，还是会感受到一种“推”的效果。

您可以从六种预先设计的颜色中进行选择css做三角形，也可以自定义您想要的颜色。 CSS 分为不同的类名称，因此您可以在一个类上设置默认按钮样式，并与其他类设置交替颜色。

译者注：以下是部分关键类型的截图

3. 谷歌按钮

地址：

Google的在线工具如Blogger、Drive、Gmail及其搜索功能都有不同的按钮样式。 开发者蒂姆·瓦格纳（Tim Wagner）在这支笔中克隆了这种风格。

它们完全用 CSS3 重构，按钮呈现出许多 Microsoft 风格的效果，您可以将它们构建得看起来很棒。 这是一个类似的示例，MonkeyRaptor 在此键上进行了扩展并添加了一些其他键。

4. 一堆按钮

地址：

此外，这些塑料风格的光泽钥匙套装也可以在艾伦·柯林斯 (Alan Collins) 创作的这支铅笔中找到。 它支持多种颜色，并有大、小、小按键不同款式。

这组设计的奇怪之处在于如何在一个类别内切换光泽和平面样式。 大多数按钮都有“样式”，但您可以使用 CSS 类启用或禁用光泽设计，这非常方便。

5.社交按钮

地址：

这组按钮可能是最具社交性的按钮系列，具有古怪的配色方案和品牌图标。

开发人员 Stan Williams 在 GitHub 上发布了此设置，并更新了颜色和密钥。 然而，这个演示清楚地表明了他的质量，具有 50 多个不同的按键。 它们都以令人眼花缭乱的渐变为背景，但程度和质量差异很大。

如果你的网站需要社交分享，你可以使用这套有趣的纯CSS按钮包。

6.果冻动画

地址：

乍一看，它可能看起来像一个普通的按钮。 而且点击按钮后，你会发现非常有趣的动画效果。

动画不仅令人难以置信，下面的半现实按钮阴影也给我留下了深刻的印象。 它随着击键而动画化，这可以使其成为任何初创网站或社交网络的完美号召性用语，增加点击的欲望。

7. 视差按钮

地址：

对于这组按钮，开发人员 Tobias Reich 使用 CSS3 径向渐变和一些非常奇怪的颜色创建了这个按钮。

CSS3 键本身就令人印象深刻。 整个背景和阴影仅使用 CSS 创建。 通过一些 JavaScript，Tobias 能够在悬停和单击时添加视差失真。

这是我一段时间以来见过的更中键的效果之一，它非常适合任何网页。

8.Hubspot 药丸

地址：

这组按钮是开发者 Joe Henriod 根据 Hubspot 的设计创建的。 它们的功能类似于传统的 HTML 按钮，但它们是使用可应用于任何元素的 CSS 类建立的。

该套件使用参考 TheMatrix 的蓝色和白色药丸按钮，但您可以将颜色修改为您喜欢的任何颜色。 悬停+单击状态非常华丽，足以吸引任何人的注意力。

9.性感的SCSS按钮

地址：

大多数后端更喜欢使用 Sass/SCSS，因为它比传统 CSS 提供更多控制并且更容易编写。 这款 SCSS 钥匙经久耐用，具有令人印象深刻的内部和外部遮阳效果。

您可以使用单独的类修改颜色，甚至可以将您自己的颜色添加到混合中。 悬停状态使按钮在按下到页面时感觉 3D 且处于活动状态。

这个键应该很容易在任何网站上实现，并且您可以直接从 CodePen 将 SCSS 转换为 CSS。

10. Mozilla 风格的按钮

地址：

Mozilla 的网站进行了品牌重塑，不再使用塑料按钮。 虽然我喜欢他们之前的设计，但幸运的是，这个是由菲利克斯·施瓦泽 (Felix Schwarzer) 制作的。

黑色三角形实际上是使用纯 CSS 以及背景渐变和 3D 斜角效果创建的。 这种按钮样式复杂，设计精美，很容易吸引用户的注意力。

总结

10 个按键中的每一个都是独一无二的，可以轻松自定义任何布局。 因为它们是用纯 CSS3 设计的，所以您可以修改它们的大小、颜色和样式以适合您的业务、博客、社交网络或电子商务商店项目。

但这个列表只是 CodePen 的很小一部分。 如果您需要更多css做三角形，可以浏览 CodePen 以获取更多纯 CSS 按钮。