创建漂亮的 CSS 按钮的 10 个代码片段(2)-木庄网络博客

　　乍一看，你可能会认为这是一个普通的按钮。但在点击按钮后，你会发现这款果冻按钮具备了绑定到单击事件的特殊动画效果。

　　除了那有趣的动画，让我印象深刻的是按钮下方的阴影设计。而按钮与阴影一同动画的设计方式，更容易让任何启动网站或社交网络的用户产生点击的欲望。

　　代码地址：【传送门】

　7. Parallax Button

　　这是一个由 Tobias Reich 使用 CSS3 的径向渐变实现的视差按钮。按钮的整个背景与阴影都是利用纯 CSS 来实现的，它确实让我印象深刻。但是，Tobias 也利用了一些 JavaScript ，实现了按钮悬停和点击时的视觉畸变的效果。

　　这个按钮也是我所见过的具备高级按钮效果的其中之一，它可以很好地融入任何网页。

　　代码地址：【传送门】

　　这组按钮是开发者 Joe Henriod 基于 Hubspot 的设计所创建的。虽然它们的功能与传统的 HTML 按钮相似，但它们是由可以应用于任何元素的 CSS 类构建的。

　　你会发现这组药片按钮只展现了红色和蓝色，但它也支持自定义颜色。而华丽的悬停与点击效果，也足以吸引到任何人的注意。

　　代码地址：【传送门】

　　大多数前端开发者都热衷于利用 Sass/SCSS，因为它们更容易编写，更能提升开发者的工作效率。

　　这些由 SCSS 实现的按钮，它们具备了内外阴影效果，且构建的细节让人印象深刻。你可以通过使用单一的类来改变其颜色，甚至可以将自己的创意混合于其中。

　　当它们融入至页面时，按钮的悬停与活动状态也有一种 3D 的既视感。

　　在任何网站上，这些按钮也比较容易实现，或者你也可以在 CodePen 上将 SCSS 代码转换为 CSS 代码，以便你的使用。

　　代码地址：【传送门】

　　Mozilla 网站曾经历了一次品牌重塑，它们放弃了传统的塑料设计，但我却很中意他们原来的设计风格。幸运的是，开发者 Felix Schwarzer 通过他的代码再次重现了他们曾经的设计。

　　我们可以看到，蓝色三角形、渐变的背景以及 3D 斜角都是利用纯 CSS 创建的。而这组按钮的设计也彰显出大气的一面，并且更容易吸引用户的注意。

　　代码地址：【传送门】

　　这 10 个独特的按钮集都是由纯 CSS3 开发的，你可以通过改变它们的大小、颜色以及样式将它们融入到企业、博客、社交网络或电子商务商店等项目中。

　　这个列表中整理的内容，只是 CodePen 上冰山的一角。如果你正在寻找更多的资源，不妨常逛逛 CodePen ，或许你会收获到更多的惊喜。

　　感谢你的阅读。

　　英文原文：10 Free Code Snippets for Creating Beautiful CSS Buttons

　　译文地址：http://www.jianshu.com/p/430817f5adee

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者