<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<style type="text/css">
body {
margin: 100px auto;
width: 300px;
}
a.button {
background: rgb(249, 252, 252);
background: -moz-linear-gradient(top, rgb(249, 252, 252) 0%, rgb(211, 227, 232) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(249, 252, 252)), color-stop(100%, rgb(211, 227, 232)));
background: -webkit-linear-gradient(top, rgb(249, 252, 252) 0%, rgb(211, 227, 232) 100%);
background: -o-linear-gradient(top, rgb(249, 252, 252) 0%, rgb(211, 227, 232) 100%);
background: -ms-linear-gradient(top, rgb(249, 252, 252) 0%, rgb(211, 227, 232) 100%);
background: linear-gradient(to bottom, rgb(249, 252, 252) 0%, rgb(211, 227, 232) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9FCFC', endColorstr='#D3E3E8',GradientType=0);
border: 1px solid rgb(180, 199, 208);
border-top: 1px solid rgb(220, 233, 237);
border-bottom: 1px solid rgb(189, 205, 213);
border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 1px 1px rgba(0, 0, 0 ,0.075), inset 0px 1px 0px rgb(255, 255, 255), inset 0px -1px 0px rgba(255, 255, 255, 0.75);
color: rgb(117, 151, 169);
display: inline-block;
*display: inline;
zoom: 1;
font-family: "Helvetica Neue", Helvetica, Arial;
font-size: 0.8em;
outline: none;
padding: 5px 8px;
text-decoration: none;
text-shadow: 0px 1px 0px rgb(255, 255, 255);
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transform: translate3d(0, 0px, 0);
-webkit-font-smoothing: antialiased;
}
a.button:hover {
opacity: 0.7;
-webkit-transform: translate3d(0, -3px, 0);
}
a.button:active {
background: rgb(211,227,232);
background: linear-gradient(to bottom, rgb(211, 227, 232) 0%, rgb(249, 252, 252) 100%);
background: -moz-linear-gradient(top, rgb(211, 227, 232) 0%, rgb(249, 252, 252) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(211, 227, 232)), color-stop(100%, rgb(249, 252, 252)));
background: -webkit-linear-gradient(top, rgb(211, 227, 232) 0%, rgb(249, 252, 252) 100%);
background: -o-linear-gradient(top, rgb(211, 227, 232) 0%, rgb(249, 252, 252) 100%);
background: -ms-linear-gradient(top, rgb(211, 227, 232) 0%, rgb(249, 252, 252) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3e3e8', endColorstr='#f9fcfc', GradientType=0);
box-shadow: inset 0px 1px 2px rgba(104, 131, 160, 0.2);
border-top: 1px solid rgb(180, 199, 208);
opacity: 1;
}
a.button.green{
background: rgb(254,254,253);
background: linear-gradient(to bottom, rgb(254, 254, 253) 0%, rgb(226, 234, 201) 100%);
background: -moz-linear-gradient(top, rgb(254, 254, 253) 0%, rgb(226, 234, 201) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(254, 254, 253)), color-stop(100%, rgb(226, 234, 201)));
background: -webkit-linear-gradient(top, rgb(254, 254, 253) 0%, rgb(226, 234, 201) 100%);
background: -o-linear-gradient(top, rgb(254, 254, 253) 0%, rgb(226, 234, 201) 100%);
background: -ms-linear-gradient(top, rgb(254, 254, 253) 0%, rgb(226, 234, 201) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefd', endColorstr='#e2eac9', GradientType=0);
border: 1px solid rgb(194, 207, 152);
border-top: 1px solid rgb(227, 235, 205);
border-bottom: 1px solid rgb(190, 204, 144);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.08), inset 0px 1px 0px rgb(255,255,255), inset 0px -1px 0px rgba(255, 255, 255, 0.75);
color: rgb(148, 172, 94);
}
a.button.green:active {
background: rgb(220, 227, 196);
background: linear-gradient(to bottom, rgb(220, 227, 196) 2%, rgb(254, 254, 253) 100%);
background: -moz-linear-gradient(top, rgb(220, 227, 196) 2%, rgb(254, 254, 253) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, rgb(220, 227, 196)), color-stop(100%, rgb(254, 254, 253)));
background: -webkit-linear-gradient(top, rgb(220, 227, 196) 2%, rgb(254, 254, 253) 100%);
background: -o-linear-gradient(top, rgb(220, 227, 196) 2%, rgb(254, 254, 253) 100%);
background: -ms-linear-gradient(top, rgb(220, 227, 196) 2%, rgb(254, 254, 253) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dce3c4', endColorstr='#fefefd',GradientType=0);
border-top: 1px solid rgb(194, 207, 152);
box-shadow: inset 0px 1px 2px rgba(174, 191, 118, 0.2);
}
a.button.orange {
background: rgb(254, 252, 234);
background: linear-gradient(to bottom, rgb(254, 252, 234) 0%, rgb(244, 219, 156) 100%);
background: -moz-linear-gradient(top, rgb(254, 252, 234) 0%, rgb(244, 219, 156) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(254, 252, 234)), color-stop(100%, rgb(244, 219, 156)));
background: -webkit-linear-gradient(top, rgb(254, 252, 234) 0%, rgb(244, 219, 156) 100%);
background: -o-linear-gradient(top, rgb(254, 252, 234) 0%, rgb(244, 219, 156) 100%);
background: -ms-linear-gradient(top, rgb(254, 252, 234) 0%, rgb(244, 219, 156) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefcea', endColorstr='#f4db9c',GradientType=0);
border: 1px solid rgb(228, 195, 111);
border-top: 1px solid rgb(245, 224, 167);
border-bottom: 1px solid rgb(219, 179, 78);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), inset 0px 1px 0px rgb(255, 255, 255), inset 0px -1px 0px rgba(255, 255, 255, 0.5);
color: rgb(213, 164, 35);
}
a.button.orange:active{
background: rgb(247,220,148);
background: linear-gradient(to bottom, rgb(247, 220, 148) 0%, rgb(254, 252, 234) 100%);
background: -moz-linear-gradient(top, rgb(247, 220, 148) 0%, rgb(254, 252, 234) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(247, 220, 148)), color-stop(100%, rgb(254, 252, 234)));
background: -webkit-linear-gradient(top, rgb(247, 220, 148) 0%, rgb(254, 252, 234) 100%);
background: -o-linear-gradient(top, rgb(247, 220, 148) 0%, rgb(254, 252, 234) 100%);
background: -ms-linear-gradient(top, rgb(247, 220, 148) 0%, rgb(254, 252, 234) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7dc94', endColorstr='#fefcea',GradientType=0 );
border-top: 1px solid rgb(228, 195, 111);
box-shadow: inset 0px 1px 2px rgba(191, 140, 0, 0.2);
}
</style>
</head>
<body>
<a href="#" class="button green">Test</a>
<a href="#" class="button blue">Test</a>
<a href="#" class="button orange">Test</a>
</body>
</html>
分享到:
相关推荐
这里主要通过background-size和background-position来控制原点的尺寸与位置,看着好像挺复杂,其实只要background-size和background-position与background-image位置一一对应就行了。虽然background-image不支持CSS...
这里主要通过background-size和background-position来控制原点的尺寸与位置,看着好像挺复杂,其实只要background-size和background-position与background-image位置一一对应就行了。虽然background-image不支持CSS...
结果可能在最初是设计的时候就有问题,设计的样式是这样的,点击父页面(页面宽度设置为100%)上的一个按钮整个页面往右侧移动页面比例为原来的50%,左侧弹出一个dialog页面,占整个页面的50%,结果dialog和原页面不...
3.如下图所示,点击设置的功能按钮,我们就进入了此插件的设置界面,里面有中文的设置支持,变成中文后我们操作起来就能更加的顺风顺水啦! jsonhandle 4.设置插件支持的语言为中文,设置成中文风格的界面之后,我们...
目录表就好像是一本书的目录。该文件不是必需的,如果创建的 chm 文件没有导航嵌窗,就可以不创建 .hhc 文件,这样一来 HTML 中的跳转就要借助其内部的超级链接了。[创建方法] (3)索引文件[Index -- .hhk...
之前看七月老师的视频,介绍到template的时候,七月老师说,这个template有一个缺点,大概意思就是封装度不够,只模板化了页面和样式,逻辑那些写不了。我也很困惑这件事,今天了解到自定义组件这个概念,就试了试,...
pulltorefresh用的android.v4里面自带的,好像知乎也是悬停和分组用的网上的,然后我把第一个分组的样式改成了自定义的menu菜单,并且清空了child.这样看上去就像一个自定义layout和listview一起滑动。
1. 【修复】发主题按钮样式错误 2. 【修复】图片过大撑破帖子 3. 【修复】面包屑文字不对齐 4. 【修复】两个高危安全漏洞 5. 【修复】安装过程缓存文件残留 6. 【修复】手机版样式兼容问题 7. 【增加】未插入帖子的...
家化CSS 使用Materialize CSS框架创建主页 请参阅材料调色板 材料设计? [材料设计入门视频]: : [3分钟内完成材料设计!]: : 材料设计原理 材质替换材质,将UI / ... 文本选择,手势含义,操作按钮的使用,搜索
GExperts就是一个这样的免费而且优秀的软件(在我的印象中,好像只有控件包中的Rxlib和Mwedit能够与之媲美)。GExperts是一个Delphi的扩展功能软件,也叫做Experts,我现在使用的版本是1.32。 下载完毕后,执行...
运行一下看看,是不是窗体中标题栏和按钮上的文字都没有了,因为我们把函数 LpkDrawTextEx替换成自己的函数HookProc1了。这个函数有10个参数,其中几个好像是字符 串指针,似乎可以用来截获窗体要显示的文字,然后...
以前说到BUTTON控件CausesValidation=true/false来设置按钮提交的表单是不是被检验也就是这里的几个检验控件,如果CausesValidation=true的话按下按钮就会首先检测是不是都通过了检验控件的检验。 下面再说两点: ...
Java二进制IO类与文件复制操作实例,好像是一本书的例子,源代码有的是独立运行的,与同目录下的其它代码文件互不联系,这些代码面向初级、中级Java程序员。 Java访问权限控制源代码 1个目标文件 摘要:Java源码,...
Java二进制IO类与文件复制操作实例,好像是一本书的例子,源代码有的是独立运行的,与同目录下的其它代码文件互不联系,这些代码面向初级、中级Java程序员。 Java访问权限控制源代码 1个目标文件 摘要:Java源码,...
style标签里的第一个样式 document.styleSheets[0].rules[0] 防止点击空链接时,页面往往重置到页首端。 ()">word 上一网页源 asp: request.servervariables("HTTP_REFERER") javascript: document....