首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

纯CSS3实现质感细腻丝滑按钮

Posted in HTML / CSS onMarch 09, 2021 
	<div class="button gray"><div class="shine"></div>HTML5素材</div>
	<div class="button blue"><div class="shine"></div>jQuery素材</div>
	<div class="button green"><div class="shine"></div>HTML5素材</div><br/>
	<div class="button red"><div class="shine"></div>JS素材</div>
	<div class="button purple"><div class="shine"></div>html5tricks</div>
	<div class="button orange"><div class="shine"></div>HTML5资源教程</div>
.info
{
	margin-top: 50px;
}

.info a
{
	text-decoration: none;
	color: #fff;
	font-size: 15px
}

.button
{
	min-height: 1.5em;
	display: inline-block;
	padding: 12px 36px;
	margin: 40px 5px 5px 0px;
	cursor: pointer;
	opacity: 0.9;
	color: #FFF;
	font-size: 1em;
	letter-spacing: 1px;
	text-shadow: rgba(0,0,0,0.9) 0px 1px 2px;
	background: #434343;
	border: 1px solid #242424;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
	-khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
	-moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
	-o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
	box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
	-webkit-transition: all 0.1s linear;
	-khtml-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	transition: all 0.1s linear;
}

.button:hover
{
	-webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
	-khtml-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
	-o-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
	box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
}

.button:active
{
	-webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
	-khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
	-moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
	-o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
	box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
}

.shine
{
	display: block;
	position: relative;
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
	background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
	padding: 0px 12px;
	top: -12px;
	left: -24px;
	height: 1px;
	-webkit-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
	-khtml-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
	-moz-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
	-o-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
	box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-khtml-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.button:hover .shine
{
	left: 24px;
}

.button:active .shine
{
	opacity: 0;
}

.button.gray
{
	background: #555;
}

.button.blue
{
	background: #3a617e;
}

.button.green
{
	background: #477343;
}

.button.red
{
	background: #723131;
}

.button.purple
{
	background: #4b3f5e;
}

.button.orange
{
	background: #624529;
}

纯CSS3实现质感细腻丝滑按钮

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
css动画效果之animation的常用样式
Mar 09 #HTML / CSS
使用CSS3实现字体颜色渐变的实现
CSS心形加载的动画源码的实现
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
详解CSS样式中的 !important * _ 符号
a标签的css样式四个状态
Mar 09 #HTML / CSS
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
实用文书(952) 文书(291) 导游词(322) 慰问信(53) 开幕词(63) 闭幕词(9) 观后感(479) HAM-2000(1) 通知(159) 申请书(21)
You might like
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
yii中widget的用法
2014/12/03 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
Python发送Email方法实例
2014/08/21 Python
python连接字符串的方法小结
2015/07/13 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
东方红海科技面试题软件测试方面
2012/02/08 面试题
公司离职证明标准样本
2014/10/05 职场文书
高中生旷课检讨书
2014/10/08 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android