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的@media来编写响应式的页面
Nov 01 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
css3应用示例:新增的选择器
Mar 16 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
一个多文件上传的例子(原创)
2006/10/09 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
AngularJS身份验证的方法
2016/02/17 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
RC4文件加密的python实现方法
2015/06/30 Python
Python做文本按行去重的实现方法
2016/10/19 Python
django admin组件使用方法详解
2019/07/19 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
pycharm的python_stubs问题
2020/04/08 Python
python实现双人五子棋(终端版)
2020/12/30 Python
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
个人实习生的自我评价
2014/02/16 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python