前端按钮生成器！要的就是效率！
大家好,我是前端实验室的老鱼！一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料等 | 副业赚钱~
「前端实验室」 专注分享 Github、Gitee等开源社区优质的前端项目、前端技术、前端学习资源以及前端资讯等各种有趣实用的前端内容。
按钮是我们页面开发中必不可少的一部分。在平常开发中，我们常常一遍又一遍的重复写着各种各样的按钮样式。
这些简单，但机械重复的工作是否影响到你的工作效率了呢？
今天为大家推荐一个按钮生成的网站。100+款按钮样式和响应方式供你挑选！准备好了吗？一起来看下吧！
3D款
平面3D效果的按钮。点击按钮，自动将按钮样式复制到剪切板，直接粘贴即可使用。
.css-button-3d--sky {
min-width: 130px;
height: 40px;
color: #fff;
padding: 5px 10px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
border-radius: 5px;
border: none;
background: #3a86ff;
box-shadow: 0 5px #4433ff;
}
.css-button-3d--sky:hover {
box-shadow: 0 3px #4433ff;
top: 1px;
}
.css-button-3d--sky:active {
box-shadow: 0 0 #4433ff;
top: 5px;
}
渐变款
渐变的按钮平常使用不多，但就怕产品经理提这样的需求。
阴影边框
按钮带点阴影边框，在大师兄的项目中算是基本需求了。因为生硬的边框总会缺乏点柔和的美感。拷贝个代码来看看。
.css-button-shadow-border--sky {
min-width: 130px;
height: 40px;
color: #fff;
padding: 5px 10px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
border-radius: 5px;
border: none;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
background: #4433ff;
}
.css-button-shadow-border--sky:hover {
background-color: #3a86ff;
}
.css-button-shadow-border--sky:active {
top: 2px;
}
这篇幅，让我自己一行代码一行代码的敲，确实有点费时间。还是直接拷贝来得快。
各种hover状态
浮光掠影的效果镂空效果
滑动效果
增加其他显示
其他
按钮的样式和交互功能，对大家来说都是很简单的操作。但重复的编写这些代码会浪费些许时间。
本文分享了各种常用的各种按钮形式，对于有自定义按钮需求的小伙伴可以作参考。
网站地址
markodenic.com/tools/butto…
写在最后
我是前端实验室的老鱼！一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料、副业等~
喜欢的朋友，点赞收藏支持一下，也欢迎交流~
作者：程序员老鱼
来源：juejin.cn/post/7202907707472609337
来源：juejin.cn/post/7202907707472609337
