创建漂亮的 CSS 按钮的 10 个代码片段
潮人猿
7年前
<p style="text-align:center"><img src="https://simg.open-open.com/show/97e24a1e092056660022d58f68353351.jpg"></p> <p>如果你正在寻找一些高质量的 CSS 按钮的示例，那么这篇文章一定是你的“菜”。在本文中，我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集，并附有它们的代码片段，方便你将它们应用在你的 Web 项目上。</p> <p>网页设计师已经不必再依赖 Photoshop 制作酷炫的按钮了。通过使用 CSS3，你可以实现背景的渐变、阴影以及光泽/闪亮的效果。</p> <h2><strong>1. Plastic Buttons</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/7393dcc13d4b272d3fe907cbc879f12c.jpg"></p> <p><a href="/misc/goto?guid=4959740601477002739" rel="nofollow,noindex">这组按钮 </a></p> <p>相当的简洁、干净。由于它们拥有不同的颜色、尺寸以及风格，并提供了小、中、大号按钮供你任意挑选。所以，你可以轻松地重新调整或更换它们。而利用纯 CSS 的实现方式，或许它也是网上最简洁、干净的按钮样式之一。</p> <p><strong>代码地址：【 <a href="/misc/goto?guid=4959740601477002739" rel="nofollow,noindex"> 传送门 </a> 】 </strong></p> <h2><strong>2. Cool Buttons</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/bcdbec7e7e4b4a11c056fc8594a84241.jpg"></p> <p>这是一组由 Felipe Marcos 制作的 <a href="/misc/goto?guid=4959740601578921173" rel="nofollow,noindex"> 酷炫按钮 </a> 。与上面的塑料按钮略有不同，但它们也易于使用。虽然没有闪亮的塑料设计，但当你点击后，依然会感受到有种“推”的效果。</p> <p>你可以从 6 款默认设计的颜色中随意挑选，或者你也可以定制自己喜欢的颜色、尺寸与样式。由于根据 CSS 类名进行分类，所以你可以在一个类上设置默认的按钮样式以及颜色。</p> <p><strong>代码地址：【 <a href="/misc/goto?guid=4959740601578921173" rel="nofollow,noindex"> 传送门 </a> 】 </strong></p> <h2><strong>3. Google Buttons</strong></h2> <p><img src="https://simg.open-open.com/show/680c67802056549037085ce7e0a3ea81.jpg"></p> <p>Google 的在线工具（如 Blogger，云盘，Gmail 及其搜索功能）都有不同的按钮样式，而开发者 Tim Wagner 在 此 Pen 中克隆了这些风格。</p> <p>作者受 Google 设计的启发，利用纯 CSS3 实现了这些看上去很酷的按钮。这还有个与此 相似的示例 ，它是由 Monkey Raptor 制作的扩展按钮，他为这些按钮进行了一些其他的混合。</p> <p><strong>代码地址：【 <a href="/misc/goto?guid=4959740601676039919" rel="nofollow,noindex"> 传送门 </a> 】 </strong></p> <h2><strong>4. Bunch-o-Buttons</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/e6166f31b5e363d937c98952f0439869.jpg"></p> <p>这是由 Alan Collins 在 CodePen 上制作的基于塑料风格的按钮合集。它拥有多种颜色以及不同的款式。这个按钮集合设计的独特之处在于，它仅通过一个单独的 CSS 类就可以在光滑的样式与 扁平化样式 间任意切换。是不是很便捷呢？</p> <p><strong>代码地址：【 <a href="/misc/goto?guid=4959740601762713525" rel="nofollow,noindex"> 传送门 </a> 】 </strong></p> <h2><strong>5. Social Buttons</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/a6826db7e1aecff51524572fe2797fc0.jpg"></p> <p>这是由具备独特的配色方案和品牌图标组成的 社交按钮合集 。开发者 Stan Williams 在 <a href="/misc/goto?guid=4959740601848952785" rel="nofollow,noindex"> GitHub </a> 上也发布了这个合集，并且进行着按钮颜色与款式的更新与维护。目前它由 50 个不同的按钮组成，同时这些按钮都有一个背景上的闪亮渐变，但它们的质量都是不错的。</p> <p>如果你需要在你的网站上添加一些 社交分享按钮 ，那么这个纯 CSS 按钮合集包是个不错的选择。</p> <p><strong>代码地址：【 <a href="/misc/goto?guid=4959740601939508385" rel="nofollow,noindex"> 传送门 </a> 】 </strong></p> <h2><strong>6. Jelly Animation</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/8298e4c949c6586b0a9be7dad2a0f1e3.jpg"></p> <p>乍一看，你可能会认为这是一个普通的按钮。但在点击按钮后，你会发现这款果冻按钮具备了绑定到单击事件的特殊动画效果。</p> <p>除了那有趣的动画，让我印象深刻的是按钮下方的阴影设计。而按钮与阴影一同动画的设计方式，更容易让任何启动网站或社交网络的用户产生点击的欲望。</p> <p><strong>代码地址：【 <a href="/misc/goto?guid=4959740602023105369" rel="nofollow,noindex"> 传送门 </a> 】 </strong></p> <h2><strong>7. Parallax Button</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/a3a3330fa85ca2a685b88cfb7fe12226.jpg"></p> <p>这是一个由 Tobias Reich 使用 CSS3 的径向渐变实现的视差按钮。按钮的整个背景与阴影都是利用纯 CSS 来实现的，它确实让我印象深刻。但是，Tobias 也利用了一些 JavaScript ，实现了按钮悬停和点击时的视觉畸变的效果。</p> <p>这个按钮也是我所见过的具备高级按钮效果的其中之一，它可以很好地融入任何网页。</p> <p><strong>代码地址：【 <a href="/misc/goto?guid=4959740602108132057" rel="nofollow,noindex"> 传送门 </a> 】 </strong></p> <h2><strong>8. Hubspot Pills</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/44ab769574a17e23fd7ab8abf231a9c8.jpg"></p> <p>这组按钮是开发者 Joe Henriod 基于 Hubspot 的设计所创建的。虽然它们的功能与传统的 HTML 按钮相似，但它们是由可以应用于任何元素的 CSS 类构建的。</p> <p>你会发现这组药片按钮只展现了红色和蓝色，但它也支持自定义颜色。而华丽的悬停与点击效果，也足以吸引到任何人的注意。</p> <p><strong>代码地址：【 <a href="/misc/goto?guid=4959740602194074774" rel="nofollow,noindex"> 传送门 </a> 】 </strong></p> <h2><strong>9. Sexy SCSS Buttons</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/ec20a08f0477a0b5ce106d9eda896750.jpg"></p> <p>大多数前端开发者都热衷于利用 Sass/SCSS，因为它们更容易编写，更能提升开发者的工作效率。</p> <p>这些由 <a href="/misc/goto?guid=4959740602271981016" rel="nofollow,noindex"> SCSS 实现的按钮 </a> ，它们具备了内外阴影效果，且构建的细节让人印象深刻。你可以通过使用单一的类来改变其颜色，甚至可以将自己的创意混合于其中。</p> <p>当它们融入至页面时，按钮的悬停与活动状态也有一种 3D 的既视感。</p> <p>在任何网站上，这些按钮也比较容易实现，或者你也可以在 CodePen 上将 SCSS 代码转换为 CSS 代码，以便你的使用。</p> <p><strong>代码地址：【 <a href="/misc/goto?guid=4959740602271981016" rel="nofollow,noindex"> 传送门 </a> 】 </strong></p> <h2><strong>10. Mozilla-Style Buttons</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/f0fcc1ff398102bb82d98e65069a8355.jpg"></p> <p>Mozilla 网站曾经历了一次 品牌重塑 ，它们放弃了传统的塑料设计，但我却很中意他们原来的设计风格。幸运的是，开发者 Felix Schwarzer 通过 他的代码</p> <p>再次重现了他们曾经的设计。</p> <p>我们可以看到，蓝色三角形、渐变的背景以及 3D 斜角都是利用纯 CSS 创建的。而这组按钮的设计也彰显出大气的一面，并且更容易吸引用户的注意。</p> <p><strong>代码地址：【 <a href="/misc/goto?guid=4959740602369734390" rel="nofollow,noindex"> 传送门 </a> 】 </strong></p> <h2><strong>总结</strong></h2> <p>这 10 个独特的按钮集都是由纯 CSS3 开发的，你可以通过改变它们的大小、颜色以及样式将它们融入到企业、博客、社交网络或电子商务商店等项目中。</p> <p>这个列表中整理的内容，只是 CodePen 上冰山的一角。如果你正在寻找更多的资源，不妨常 逛逛 CodePen ，或许你会收获到更多的惊喜。</p> <p> </p> <p> </p> <p>来自：https://zhuanlan.zhihu.com/p/25597059</p> <p> </p>