html5 CSS3 渐变按钮
来源：互联网 发布：盆景种子淘宝哪家好 编辑：程序博客网 时间：2024/05/14 14:49
html5 CSS3 渐变按钮
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Cross-browser CSS gradient buttons demo</title><style>body {background: #e5e5e5;text-align: center;} /*----------------------------*/.button {margin: 10px;text-decoration: none;font: bold 1.5em 'Trebuchet MS', Arial, Helvetica;/*更变按钮的大小来个调整位置*/display: inline-block;text-align: center;color: #fff;border: 1px solid #9c9c9c; /*边框样式 */border: 1px solid rgba(0, 0, 0, 0.3);text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4);-moz-box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4);-webkit-box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4);} .button,.button span {-moz-border-radius: .3em;border-radius: .3em;} .button span {border-top: 1px solid #fff; /* 上边框样式 */border-top: 1px solid rgba(255, 255, 255, 0.5);display: block;padding: 0.5em 2.5em; /* 对齐 */background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0,0.05) ), color-stop(.25, transparent), to(transparent) ),-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0,0.05) ), color-stop(.25, transparent), to(transparent) ),-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent),color-stop(.75, rgba(0, 0, 0, 0.05) ) ),-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent),color-stop(.75, rgba(0, 0, 0, 0.05) ) );background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%,transparent 25%, transparent ),-moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%,transparent ),-moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75% ),-moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%); -moz-background-size: 3px 3px;-webkit-background-size: 3px 3px;background-size: 3px 3px;} .button:hover {box-shadow: 0 0 .1em rgba(0, 0, 0, 0.4);-moz-box-shadow: 0 0 .1em rgba(0, 0, 0, 0.4);-webkit-box-shadow: 0 0 .1em rgba(0, 0, 0, 0.4);} .button:active { /* 按钮点击 更变button位置，从而出现动态效果*/position: relative;top: 1px;} /*----------------------------*/.button-khaki {background: #A2B598;background: -webkit-gradient(linear, left top, left bottom, from(#BDD1B4),to(#A2B598) );background: -moz-linear-gradient(-90deg, #BDD1B4, #A2B598);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#BDD1B4', EndColorStr = '#A2B598' );} .button-khaki:hover {background: #BDD1B4;background: -webkit-gradient(linear, left top, left bottom, from(#A2B598),to(#BDD1B4) );background: -moz-linear-gradient(-90deg, #A2B598, #BDD1B4);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#A2B598', EndColorStr = '#BDD1B4' );} .button-khaki:active {background: #A2B598;} /*----------------------------*/.button-blue {background: #4477a1;background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb),to(#4477a1) );background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter: progid : DXImageTransform.Microsoft.gradient ( GradientType = 0,startColorstr = '#81a8cb', endColorstr = '#4477a1' );} .button-blue:hover {background: #81a8cb;background: -webkit-gradient(linear, left top, left bottom, from(#4477a1),to(#81a8cb) );background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter: progid : DXImageTransform.Microsoft.gradient ( GradientType = 0,startColorstr = '#4477a1', endColorstr = '#81a8cb' );} .button-blue:active {background: #4477a1;} /*----------------------------*/.button-brown {background: #8f3714;background: -webkit-gradient(linear, left top, left bottom, from(#bf6f50),to(#8f3714) );background: -moz-linear-gradient(-90deg, #bf6f50, #8f3714);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#bf6f50', EndColorStr = '#8f3714' );} .button-brown:hover {background: #bf6f50;background: -webkit-gradient(linear, left top, left bottom, from(#8f3714),to(#bf6f50) );background: -moz-linear-gradient(-90deg, #8f3714, #bf6f50);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#8f3714', EndColorStr = '#bf6f50' );} .button-brown:active {background: #8f3714;} /*----------------------------*/.button-green {background: #428739;background: -webkit-gradient(linear, left top, left bottom, from(#c8dd95),to(#428739) );background: -moz-linear-gradient(-90deg, #c8dd95, #428739);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#c8dd95', EndColorStr = '#428739' );} .button-green:hover {background: #c8dd95;background: -webkit-gradient(linear, left top, left bottom, from(#428739),to(#c8dd95) );background: -moz-linear-gradient(-90deg, #428739, #c8dd95);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#428739', EndColorStr = '#c8dd95' );} .button-green:active {background: #428739;} /*----------------------------*/.button-red {background: #D82741;background: -webkit-gradient(linear, left top, left bottom, from(#E84B6E),to(#D82741) );background: -moz-linear-gradient(-90deg, #E84B6E, #D82741);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#E84B6E', EndColorStr = '#D82741' );} .button-red:hover {background: #E84B6E;background: -webkit-gradient(linear, left top, left bottom, from(#D82741),to(#E84B6E) );background: -moz-linear-gradient(-90deg, #D82741, #E84B6E);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#D82741', EndColorStr = '#E84B6E' );} .button-red:active {background: #D82741;} /*----------------------------*/.button-purple {background: #6F50E7;background: -webkit-gradient(linear, left top, left bottom, from(#B8A9F3),to(#6F50E7) );background: -moz-linear-gradient(-90deg, #B8A9F3, #6F50E7);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#B8A9F3', EndColorStr = '#6F50E7' );} .button-purple:hover {background: #B8A9F3;background: -webkit-gradient(linear, left top, left bottom, from(#6F50E7),to(#B8A9F3) );background: -moz-linear-gradient(-90deg, #6F50E7, #B8A9F3);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#6F50E7', EndColorStr = '#B8A9F3' );} .button-purple:active {background: #6F50E7;} /*----------------------------*/.button-black {background: #141414;background: -webkit-gradient(linear, left top, left bottom, from(#656565),to(#141414) );background: -moz-linear-gradient(-90deg, #656565, #141414);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#656565', EndColorStr = '#141414' );} .button-black:hover {background: #656565;background: -webkit-gradient(linear, left top, left bottom, from(#141414),to(#656565) );background: -moz-linear-gradient(-90deg, #141414, #656565);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#141414', EndColorStr = '#656565' );} .button-black:active {background: #141414;} /*----------------------------*/.button-orange {background: #f09c15;background: -webkit-gradient(linear, left top, left bottom, from(#f8c939),to(#f09c15) );background: -moz-linear-gradient(-90deg, #f8c939, #f09c15);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#f8c939', EndColorStr = '#f09c15' );} .button-orange:hover {background: #f8c939;background: -webkit-gradient(linear, left top, left bottom, from(#f09c15),to(#f8c939) );background: -moz-linear-gradient(-90deg, #f09c15, #f8c939);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#f09c15', EndColorStr = '#f8c939' );} .button-orange:active {background: #f09c15;} /*----------------------------*/.button-silver {background: #c5c5c5;background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea),to(#c5c5c5) );background: -moz-linear-gradient(-90deg, #eaeaea, #c5c5c5);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#eaeaea', EndColorStr = '#c5c5c5' );} .button-silver:hover {background: #eaeaea;background: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5),to(#eaeaea) );background: -moz-linear-gradient(-90deg, #c5c5c5, #eaeaea);filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,StartColorStr = '#c5c5c5', EndColorStr = '#eaeaea' );} .button-silver:active {background: #c5c5c5;}</style><!-- AdPacks --><style>#adpacks-wrapper {font-family: Arial, Helvetica;width: 280px;position: fixed;_position: absolute;bottom: 0;right: 20px;z-index: 9999;background: #eaeaea;padding: 10px;-moz-box-shadow: 0 0 15px #444;-webkit-box-shadow: 0 0 15px #444;box-shadow: 0 0 15px #444;} body .adpacks {background: #fff;padding: 15px;margin: 15px 0 0;border: 3px solid #eee;} body .one .bsa_it_ad {background: transparent;border: none;font-family: inherit;padding: 0;margin: 0;} body .one .bsa_it_ad .bsa_it_i {display: block;padding: 0;float: left;margin: 0 10px 0 0;} body .one .bsa_it_ad .bsa_it_i img {padding: 0;border: none;} body .one .bsa_it_ad .bsa_it_t {padding: 0 0 6px 0;font-size: 11px;} body .one .bsa_it_p {display: none;} body #bsap_aplink,body #bsap_aplink:hover {display: block;font-size: 9px;margin: -15px 0 0 0;text-align: right;} body .one .bsa_it_ad .bsa_it_d {font-size: 11px;} body .one {overflow: hidden}</style></head><body><h1>html5 CSS3 渐变按钮</h1><a href="http://www.clxgj.com" class="button button-khaki"><span>Button</span></a><a href="http://www.clxgj.com" class="button button-blue"><span>Button</span></a><a href="http://www.clxgj.com" class="button button-brown"><span>Button</span></a><br><a href="http://www.clxgj.com" class="button button-red"><span>Button</span></a><a href="http://www.clxgj.com" class="button button-purple"><span>Button</span></a><a href="http://www.clxgj.com" class="button button-green"><span>Button</span></a><br><a href="http://www.clxgj.com" class="button button-black"><span>Button</span></a><a href="http://www.clxgj.com" class="button button-orange"><span>Button</span></a><a href="http://www.clxgj.com" class="button button-silver"><span>Button</span></a></body></html>截图如下：
- html5 CSS3 渐变按钮
- CSS3渐变色按钮
- CSS3渐变色按钮
- 【html5】css3渐变
- CSS3徽章按钮-圆角+渐变
- CSS3之渐变色按钮
- 9种样式CSS3 渐变按钮集
- 【HTML5学习笔记】29：CSS3渐变效果
- CSS3演绎神奇按钮效果(HTML5)
- [HTML5-SVG]使用svg代替css3实现渐变
- 背景渐变：html5+css3中的background: -moz-linear-gradient
- css3 渐变
- css3渐变
- CSS3渐变
- CSS3渐变
- css3渐变
- css3-渐变
- css3渐变
- 二叉树递归，非递归，前中后遍历
- jxl jsp 导出excel
- java自定义注解
- 我要为E语言程序员正名！我用一句代码证明E语言和VB是同一种语言！
- OCP-1Z0-052-V9.02-177题
- html5 CSS3 渐变按钮
- hw 9.11
- 图片双缓存加载
- 启用Confluence远程接口调用（Remote API）
- win8 安装office2013，安装最后又回滚，安装失败（替换过 store）
- 【Google官方教程】第一课：高效地加载大Bitmap(位图)
- 我的Android进阶之旅------>Android如何去除GridView的按下或点击选中后的背景效果
- C++对象序列化方案对比
- java 调用 dll
