css3圆角样式分享自定义按钮样式


Posted in HTML / CSS onDecember 27, 2013

复制代码
代码如下:

<div class="main">
<!--css3自定义渐变圆角按钮样式-->
<input type="submit" class="btn-style-01" value="提交" />
<!--css3自定义渐变圆角按钮样式-->
</div></p> <p><style type="text/css">
.btn-style-01{
border-style:none;
padding:8px 30px;
line-height:24px;
color:#fff;
font:16px "Microsoft YaHei", Verdana, Geneva, sans-serif;
cursor:pointer;
border:1px #ae7d0a solid;
-webkit-box-shadow:inset 0px 0px 1px #fff;
-moz-box-shadow:inset 0px 0px 1px #fff;
box-shadow:inset 0px 0px 1px #fff;/*内发光效果*/
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;/*边框圆角*/
text-shadow:1px 1px 0px #b67f01;/*字体阴影效果*/
background-color:#feb100;
background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#feb100), to(#e8a201));
background-image: -webkit-linear-gradient(top, #feb100 0%, #e8a201 100%);
background-image: -moz-linear-gradient(top, #feb100 0%, #e8a201 100%);
background-image: -ms-linear-gradient(top, #feb100 0%, #e8a201 100%);
background-image: -o-linear-gradient(top, #feb100 0%, #e8a201 100%);
background-image: linear-gradient(top, #feb100 0%, #e8a201 100%);/*颜色渐变效果*/
}
.btn-style-01:hover {
background-color:#e8a201;
background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#e8a201), to(#feb100));
background-image: -webkit-linear-gradient(top, #e8a201 0%, #feb100 100%);
background-image: -moz-linear-gradient(top, #e8a201 0%, #feb100 100%);
background-image: -ms-linear-gradient(top, #e8a201 0%, #feb100 100%);
background-image: -o-linear-gradient(top, #e8a201 0%, #feb100 100%);
background-image: linear-gradient(top, #e8a201 0%, #feb100 100%);
}
</style>
HTML / CSS 相关文章推荐
css3学习之2D转换功能详解
Dec 23 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 #HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 #HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 #HTML / CSS
css3高级选择器使用方法
Dec 02 #HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 #HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 #HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 #HTML / CSS
You might like
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
python类参数self使用示例
2014/02/17 Python
python实现telnet客户端的方法
2015/04/15 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python发展简史 Python来历
2019/05/14 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
用python写PDF转换器的实现
2020/10/29 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
方法名是否可以与构造器的名字相同
2012/06/04 面试题
环境工程专业个人求职信
2013/12/05 职场文书
家长会学生家长演讲稿
2013/12/29 职场文书
人事档案接收函
2014/01/12 职场文书
给女儿的表扬信
2014/01/18 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
实现GO语言对数组切片去重
2022/04/20 Golang