如果你正在找寻一些高质量的 CSS 按钮的示例，那么这篇文章一定是你的“菜”。在本文中，我们从 CodePen 上搜集了 10 个奇特的 CSS 按钮合辑，并附有它们的代码片断，方便你将它们应用在你的 Web 项目上。
网页设计师早已毋须再依赖 Photoshop 制作炫酷的按键了。通过使用 CSS3，你可以实现背景的渐变、阴影以及光泽/闪亮的疗效。
1. Plastic Buttons
这组按键相当的简约、干净。由于它们拥有不同的颜色、尺寸以及风格，并提供了小、中、大号按键供你任意选购。所以，你可以轻松地重新调整或更换它们。而借助纯 CSS 的实现方法，或许它也是网上最简约、干净的按键款式之一。
代码地址：【传送门】
2. Cool Buttons
这是一组由 Felipe Marcos 制作的超酷按键。与前面的塑胶按键略有不同，但它们也便于使用。虽然没有闪耀的塑胶设计，但当你点击后，依然会感受到有种“推”的疗效。
你可以从 6 款默认设计的颜色中随便选购，或者你也可以定做自己喜欢的颜色、尺寸与款式。由于按照 CSS 类名进行分类，所以你可以在一个类上设置默认的按键款式以及颜色。
代码地址：【传送门】
3. Google Buttons
Google 的在线工具（如 Blogger，云盘，Gmail 及其搜索功能）都有不同的按键款式，而开发者 Tim Wagner 在此 Pen 中克隆了这种风格。
作者受 Google 设计的启发，利用纯 CSS3 实现了这种看上去很酷的按键。这还有个与此相像的示例，它是由 Monkey Raptor 制作的扩充按键，他为这种按键进行了一些其他的混和。
代码地址：【传送门】
4. Bunch-o-Buttons
这是由 Alan Collins 在 CodePen 上制做的基于塑胶风格的按键合辑。它拥有多种颜色以及不同的样式。这个按键集合设计的奇特之处在于，它仅通过一个单独的 CSS 类就可以在光滑的式样与扁平化款式间任意切换。是不是很方便呢？
代码地址：【传送门】
5. Social Buttons
这是由具备奇特的配色方案和品牌图标组成的社交按键合辑。开发者 Stan Williams 在 GitHub 上也发布了这个合辑，并且进行着按键颜色与样式的更新与维护。目前它由 50 个不同的按键组成，同时这种按键都有一个背景上的闪耀渐变，但它们的质量都是不错的。
如果你须要在你的网站上添加一些社交分享按键，那么这个纯 CSS 按钮合辑包是个不错的选择。
代码地址：【传送门】
6. Jelly Animation
乍一看，你可能会觉得这是一个普通的按键。但在点击按键后，你会发觉这款果冻按键具备了绑定到单击风波的特殊动漫疗效。
除了那有趣的动漫，让我印象深刻的是按键下方的阴影设计。而按键与阴影一齐动漫的设计方法，更容易让任何启动网站或社交网络的用户形成点击的欲望。
代码地址：【传送门】
7. Parallax Button
这是一个由 Tobias Reich 使用 CSS3 的径向渐变实现的视差按键。按钮的整个背景与阴影都是借助纯 CSS 来实现的，它确实让我印象深刻。但是，Tobias 也借助了一些 JavaScript ，实现了按键悬停和点击时的视觉畸变的疗效。
这个按键也是我所见过的具备中级按键疗效的其中之一，它可以挺好地融入任何网页。
代码地址：【传送门】
8. Hubspot Pills
这组按键是开发者 Joe Henriod 基于 Hubspot 的设计所创建的。虽然它们的功能与传统的 HTML 按钮相像，但它们是由可以应用于任何元素的 CSS 类建立的。
你会发觉这组药丸按键只突显了黑色和白色，但它也支持自定义颜色。而华丽的悬停与点击疗效，也足以吸引到任何人的注意。
代码地址：【传送门】
9. Sexy SCSS Buttons
大多数后端开发者都热衷于借助 Sass/SCSS，因为它们更容易编撰，更能提高开发者的工作效率。
这些由 SCSS 实现的按键，它们具备了内外阴影疗效，且建立的细节让人印象深刻。你可以通过使用单一的类来改变其颜色，甚至可以将自己的创意混和于其中。
当它们融入至页面时，按钮的悬停与活动状态也有一种 3D 的既视感。
在任何网站上，这些按键也比较容易实现，或者你也可以在 CodePen 上将 SCSS 代码转换为 CSS 代码，以便你的使用。
代码地址：【传送门】
10. Mozilla-Style Buttons
Mozilla 网站曾经历了一次品牌塑造，它们舍弃了传统的塑胶设计，但我却很中意她们原先的设计风格。幸运的是，开发者 Felix Schwarzer 通过他的代码再度再现了她们当初的设计。
我们可以看见，蓝色三角形、渐变的背景以及 3D 斜角都是借助纯 CSS 创建的。而这组按键的设计也体现出大气的一面，并且更容易吸引用户的注意。
代码地址：【传送门】
总结
这 10 个奇特的按键集都是由纯 CSS3 开发的，你可以通过改变它们的大小、颜色以及款式将它们融入到企业、博客、社交网络或电子商务商店等项目中。
这个列表中整理的内容，只是 CodePen 上冰山的一角。如果你正在找寻更多的资源，不妨常逛逛 CodePen ，或许你会收获到更多的惊喜。
感谢你的阅读。
英文原文：10 Free Code Snippets for Creating Beautiful CSS Buttons
译文地址：
以上就是创建漂亮的 CSS 按钮的 10 个代码片断的详尽内容，更多请关注php中文网其它相关文章！
