整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
果你正在寻找一些高质量的 CSS 按钮的示例，那么这篇文章一定是你的“菜”。在本文中，我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集，并附有它们的代码片段，方便你将它们应用在你的 Web 项目上。
网页设计师已经不必再依赖 Photoshop 制作酷炫的按钮了。通过使用 CSS3，你可以实现背景的渐变、阴影以及光泽/闪亮的效果。
这组按钮相当的简洁、干净。由于它们拥有不同的颜色、尺寸以及风格，并提供了小、中、大号按钮供你任意挑选。所以，你可以轻松地重新调整或更换它们。而利用纯 CSS 的实现方式，或许它也是网上最简洁、干净的按钮样式之一。
代码地址：
https://codepen.io/ben_jammin/pen/syaCq
这是一组由 Felipe Marcos 制作的酷炫按钮。与上面的塑料按钮略有不同，但它们也易于使用。虽然没有闪亮的塑料设计，但当你点击后，依然会感受到有种“推”的效果。
你可以从 6 款默认设计的颜色中随意挑选，或者你也可以定制自己喜欢的颜色、尺寸与样式。由于根据 CSS 类名进行分类，所以你可以在一个类上设置默认的按钮样式以及颜色。
代码地址：
http://codepen.io/FelipeMarcos/pen/tfhEg
Google 的在线工具（如 Blogger，云盘，Gmail 及其搜索功能）都有不同的按钮样式，而开发者 Tim Wagner 在此 Pen 中克隆了这些风格。
作者受 Google 设计的启发，利用纯 CSS3 实现了这些看上去很酷的按钮。这还有个与此相似的示例，它是由 Monkey Raptor 制作的扩展按钮，他为这些按钮进行了一些其他的混合。
代码地址：
https://codepen.io/timwagner/pen/pAecq
这是由 Alan Collins 在 CodePen 上制作的基于塑料风格的按钮合集。它拥有多种颜色以及不同的款式。这个按钮集合设计的独特之处在于，它仅通过一个单独的 CSS 类就可以在光滑的样式与扁平化样式间任意切换。是不是很便捷呢？
代码地址：
https://codepen.io/AlanCollins/pen/EwDar
这是由具备独特的配色方案和品牌图标组成的社交按钮合集。开发者 Stan Williams 在GitHub 上也发布了这个合集，并且进行着按钮颜色与款式的更新与维护。目前它由 50 个不同的按钮组成，同时这些按钮都有一个背景上的闪亮渐变，但它们的质量都是不错的。
如果你需要在你的网站上添加一些社交分享按钮，那么这个纯 CSS 按钮合集包是个不错的选择。
代码地址：
http://codepen.io/Stanssongs/pen/GgvbD
乍一看，你可能会认为这是一个普通的按钮。但在点击按钮后，你会发现这款果冻按钮具备了绑定到单击事件的特殊动画效果。
除了那有趣的动画，让我印象深刻的是按钮下方的阴影设计。而按钮与阴影一同动画的设计方式，更容易让任何启动网站或社交网络的用户产生点击的欲望。
代码地址：
http://codepen.io/ayamflow/pen/Dufxr
这是一个由 Tobias Reich 使用 CSS3 的径向渐变实现的视差按钮。按钮的整个背景与阴影都是利用纯 CSS 来实现的，它确实让我印象深刻。但是，Tobias 也利用了一些 JavaScript ，实现了按钮悬停和点击时的视觉畸变的效果。
这个按钮也是我所见过的具备高级按钮效果的其中之一，它可以很好地融入任何网页。
代码地址：
https://codepen.io/electerious/pen/rroqdL
这组按钮是开发者 Joe Henriod 基于 Hubspot 的设计所创建的。虽然它们的功能与传统的 HTML 按钮相似，但它们是由可以应用于任何元素的 CSS 类构建的。
你会发现这组药片按钮只展现了红色和蓝色，但它也支持自定义颜色。而华丽的悬停与点击效果，也足以吸引到任何人的注意。
代码地址：
http://codepen.io/joehenriod/pen/QEXJAq
大多数前端开发者都热衷于利用 Sass/SCSS，因为它们更容易编写，更能提升开发者的工作效率。
这些由 SCSS 实现的按钮，它们具备了内外阴影效果，且构建的细节让人印象深刻。你可以通过使用单一的类来改变其颜色，甚至可以将自己的创意混合于其中。
当它们融入至页面时，按钮的悬停与活动状态也有一种 3D 的既视感。
在任何网站上，这些按钮也比较容易实现，或者你也可以在 CodePen 上将 SCSS 代码转换为 CSS 代码，以便你的使用。
代码地址：
https://codepen.io/jgthms/pen/EjxBdR
Mozilla 网站曾经历了一次品牌重塑，它们放弃了传统的塑料设计，但我却很中意他们原来的设计风格。幸运的是，开发者 Felix Schwarzer 通过他的代码再次重现了他们曾经的设计。
我们可以看到，蓝色三角形、渐变的背景以及 3D 斜角都是利用纯 CSS 创建的。而这组按钮的设计也彰显出大气的一面，并且更容易吸引用户的注意。
代码地址：
http://codepen.io/slimsmearlapp/pen/HJgFG
这 10 个独特的按钮集都是由纯 CSS3 开发的，你可以通过改变它们的大小、颜色以及样式将它们融入到企业、博客、社交网络或电子商务商店等项目中。
这个列表中整理的内容，只是 CodePen 上冰山的一角。如果你正在寻找更多的资源，不妨常逛逛 CodePen ，或许你会收获到更多的惊喜。
感谢你的阅读。
注：
本文版权归原作者所有，仅用于学习与交流。
如需转载译文，烦请按下方注明出处信息，谢谢！
英文原文：10 Free Code Snippets for Creating Beautiful CSS Buttons
作者：Jake Rocheleau
译者：IT程序狮
译文地址：http://www.jianshu.com/p/430817f5adee
天一小步，一年一大步。加油。
好了，不说了，开始学习吧。
引言
错位的按钮样式，是怎么做出来的呢？
其实，我想做成这样的效果。
如果有大神能帮我用纯代码实现以下的效果，小弟我感激不尽。
虚线
技术有限，
可是，用css无法作出断线的效果，怎么办？
没办法，只能用……
用虚线？
推荐下我的前端群：524262608，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份2017最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。
于是，就做出了这样的效果，上面留有空白。
.btn { width: 140px; height: 35px; border: dashed #505050 1.1px; border-radius: 50px;
}.btn_sex { background-image: -webkit-linear-gradient( -90deg, rgb(254,230,48) 0%, rgb(225,196,27) 95%, rgb(195,162,5) 100%);
width: 138px; height: 35px;
text-align: center; line-height: 33px;
border-radius: 50px; margin-top: 1.2px; margin-left: 2px; }body里的效果是：
<div class="btn" <div class="btn_sex"> <span>下一步</span> </div></div>
虽然实际效果没有应用，但还是学会了一个技能，感觉又和前端近了一步。
为大家介绍使用 CSS 来制作按钮。
基本按钮样式
默认按钮 CSS 按钮
CSS 实例
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
按钮颜色
GreenBlueRedGrayBlack
我们可以使用 background-color 属性来设置按钮颜色:
CSS 实例
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
尝试一下 »
按钮大小
10px12px16px20px24px
我们可以使用 font-size 属性来设置按钮大小:
CSS 实例
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
圆角按钮
2px4px8px12px50%
我们可以使用 border-radius 属性来设置圆角按钮:
CSS 实例
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
尝试一下 »
按钮边框颜色
绿蓝红灰黑
我们可以使用 border 属性设置按钮边框颜色:
CSS 实例
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
尝试一下 »
鼠标悬停按钮
绿蓝红灰黑
绿蓝红灰黑
我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。
提示: 我们可以使用 transition-duration 属性来设置 "hover" 效果的速度:
CSS 实例
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
按钮阴影
阴影按钮鼠标悬停后显示阴影
我们可以使用 box-shadow 属性来为按钮添加阴影:
CSS 实例
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
尝试一下 »
禁用按钮
正常按钮禁用按钮
我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。
提示: 我么可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片:
CSS 实例
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
尝试一下 »
按钮宽度
250px
50%100%
默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:
提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。
CSS 实例
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
尝试一下 »
按钮组
ButtonButtonButtonButton
移除外边距并添加 float:left 来设置按钮组:
CSS 实例
.button {
float: left;
}
尝试一下 »
带边框按钮组
ButtonButtonButtonButton
我们可以使用 border 属性来设置带边框的按钮组:
CSS 实例
.button {
float: left;
border: 1px solid green
}
尝试一下 »
按钮动画
CSS 实例
鼠标移动到按钮上后添加箭头标记:
Hover
尝试一下 »
CSS 实例
点击时添加 "波纹" 效果:
Click
CSS 实例
点击时添加 "压下" 效果:
Click
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
