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解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
HTML基本元素标签介绍
Feb 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
PHP 远程关机实现代码
2009/11/10 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
再探JavaScript作用域
2014/09/24 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
Python中用Spark模块的使用教程
2015/04/13 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
详解python读取和输出到txt
2019/03/29 Python
如何用Python绘制3D柱形图
2020/09/16 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
应届毕业生求职信范例分享
2013/12/17 职场文书
客服部班长工作责任制
2014/02/25 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
反腐倡廉标语
2014/06/24 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
原告代理词范文
2015/05/25 职场文书