文档章节

创建漂亮的 CSS 按钮的 10 个代码片段

孟飞阳
 孟飞阳
发布于 2017/04/08 09:45
字数 1578
阅读 15
收藏 0

如果你正在寻找一些高质量的 CSS 按钮的示例,那么这篇文章一定是你的“菜”。在本文中,我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集,并附有它们的代码片段,方便你将它们应用在你的 Web 项目上。

网页设计师已经不必再依赖 Photoshop 制作酷炫的按钮了。通过使用 CSS3,你可以实现背景的渐变、阴影以及光泽/闪亮的效果。

1. Plastic Buttons

创建漂亮的 CSS 按钮的 10 个代码片段

这组按钮相当的简洁、干净。由于它们拥有不同的颜色、尺寸以及风格,并提供了小、中、大号按钮供你任意挑选。所以,你可以轻松地重新调整或更换它们。而利用纯 CSS 的实现方式,或许它也是网上最简洁、干净的按钮样式之一。

代码地址:

https://codepen.io/ben_jammin/pen/syaCq

2. Cool Buttons

创建漂亮的 CSS 按钮的 10 个代码片段

这是一组由 Felipe Marcos 制作的酷炫按钮。与上面的塑料按钮略有不同,但它们也易于使用。虽然没有闪亮的塑料设计,但当你点击后,依然会感受到有种“推”的效果。

你可以从 6 款默认设计的颜色中随意挑选,或者你也可以定制自己喜欢的颜色、尺寸与样式。由于根据 CSS 类名进行分类,所以你可以在一个类上设置默认的按钮样式以及颜色。

代码地址:

http://codepen.io/FelipeMarcos/pen/tfhEg

3. Google Buttons

创建漂亮的 CSS 按钮的 10 个代码片段

Google 的在线工具(如 Blogger,云盘,Gmail 及其搜索功能)都有不同的按钮样式,而开发者 Tim Wagner 在此 Pen 中克隆了这些风格。

作者受 Google 设计的启发,利用纯 CSS3 实现了这些看上去很酷的按钮。这还有个与此相似的示例,它是由 Monkey Raptor 制作的扩展按钮,他为这些按钮进行了一些其他的混合。

代码地址:

https://codepen.io/timwagner/pen/pAecq

4. Bunch-o-Buttons

创建漂亮的 CSS 按钮的 10 个代码片段

这是由 Alan Collins 在 CodePen 上制作的基于塑料风格的按钮合集。它拥有多种颜色以及不同的款式。这个按钮集合设计的独特之处在于,它仅通过一个单独的 CSS 类就可以在光滑的样式与扁平化样式间任意切换。是不是很便捷呢?

代码地址:

https://codepen.io/AlanCollins/pen/EwDar

5. Social Buttons

创建漂亮的 CSS 按钮的 10 个代码片段

这是由具备独特的配色方案和品牌图标组成的社交按钮合集。开发者 Stan Williams 在GitHub 上也发布了这个合集,并且进行着按钮颜色与款式的更新与维护。目前它由 50 个不同的按钮组成,同时这些按钮都有一个背景上的闪亮渐变,但它们的质量都是不错的。

如果你需要在你的网站上添加一些社交分享按钮,那么这个纯 CSS 按钮合集包是个不错的选择。

代码地址:

http://codepen.io/Stanssongs/pen/GgvbD

6. Jelly Animation

创建漂亮的 CSS 按钮的 10 个代码片段

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

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

代码地址:

http://codepen.io/ayamflow/pen/Dufxr

7. Parallax Button

创建漂亮的 CSS 按钮的 10 个代码片段

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

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

代码地址:

https://codepen.io/electerious/pen/rroqdL

8. Hubspot Pills

创建漂亮的 CSS 按钮的 10 个代码片段

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

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

代码地址:

http://codepen.io/joehenriod/pen/QEXJAq

9. Sexy SCSS Buttons

创建漂亮的 CSS 按钮的 10 个代码片段

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

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

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

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

代码地址:

https://codepen.io/jgthms/pen/EjxBdR

10. Mozilla-Style Buttons

创建漂亮的 CSS 按钮的 10 个代码片段

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

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

代码地址:

http://codepen.io/slimsmearlapp/pen/HJgFG

总结

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

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

感谢你的阅读。

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 212
博文 998
码字总数 550537
作品 5
朝阳
个人站长
私信 提问
如果你在找 CSS 学习资源,那就收藏这篇文章

本文由伯乐在线 -伯小乐 翻译。未经许可,禁止转载! 英文出处:Grace Smith。欢迎加入翻译组。 如果你在寻找一些 CSS 基础和高级的指南或资源,那这篇文章应该有你要的 CSS 初级和高级指南:...

伯乐在线
2014/11/07
0
0
17 款提高编码效率的 CSS 工具

摘要:作为WEB前端开发人员,你的工作可能很大一部分都在编写CSS代码,为了提高前端开发人员编写CSS代码的效率,编程文库从 网上搜集了17款可以提高你CSS代码效率的CSS工具,它们可以帮助你快...

ruby_chen
2013/06/26
5.4K
15
分享10个实用的超绚CSS3按钮设计

日期:2012-4-10 来源:GBin1.com CSS3在web开发技术中绝对是超棒的!随着梯度,阴影,文字阴影和边界半径属性的添加,我们现在还可以使用简单的HTML标记和CSS3代码来创建非 常漂亮的按钮。我...

gbin1
2012/04/12
0
0
10 套华丽的 CSS3 按钮推荐

在过去的Web开发中,通常使用Photoshop来设计按钮的样式。不过随着CSS3技术的发展,你完全可以通过几行代码来定制一个漂亮的按钮,并且还可以呈现渐变、框阴影、文字阴影等效果。此类按钮最大...

李长春
2012/04/11
0
3
超棒的 15 款 Bootstrap UI 编辑器

自从 2011 年 Mark Otto 和 Jacob Thornton 开发了 Bootstrap,我们第一次接触并熟知了 Bootstrap 。这些都归功于 Twitter!从那以后,它就非常流行并且成为了最好的响应式框架之一。Bootstr...

oschina
2014/01/23
53.7K
26

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 —— 看来我只适合当一个千斤顶

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《我想我是伟大的》 《我想我是伟大的》- 九天 手机党少年们想听歌,请使劲儿戳(这里) 最近面试的好多呀, 面试了一个漂...

小小编辑
31分钟前
348
9
grafana安装使用及与zabbix集成

grafana简介 Grafana是一个完全开源的度量分析与可视化平台,可对来自各种各种数据源的数据进行查询、分析、可视化处理以及配置告警。 Grafana支持的数据源: 官方:Graphite,InfluxDB,Ope...

阿dai学长
今天
16
0
带你看数据挖掘与机器学习-厦大EDP上课出勤预测

带你看数据挖掘与机器学习-厦大EDP上课出勤预测 标签: 数据挖掘 特征工程 机器学习 出勤预测 write by xmhexi 2019/3/22 内容提要 首先说明本文是一篇科普文章,通过一个实际案例,帮助理解什...

xmhexi
今天
141
0
IOS  学习记录

1.StackView=>IOS 9及以上支持 2.布局方式: AutoLayout / StackView 堆布局 (线性布局) 3.屏幕适配 (资源分辨率、设计分辨率、屏幕分辨率) Size Class技术 可以针对 屏幕的方向进行设置...

萨x姆
今天
5
0
第四次工业革命:自主经济的崛起

https://36kr.com/p/5170370.html

shengjuntu
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部