`

好像的按钮样式

    博客分类：
  • css
htmlcssbutton 
阅读更多 
<!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>
分享到：
| css,button,透明
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css样式粒子动效的按钮

    这里主要通过background-size和background-position来控制原点的尺寸与位置，看着好像挺复杂，其实只要background-size和background-position与background-image位置一一对应就行了。虽然background-image不支持CSS...

    css样式粒子散开的按钮

    这里主要通过background-size和background-position来控制原点的尺寸与位置，看着好像挺复杂，其实只要background-size和background-position与background-image位置一一对应就行了。虽然background-image不支持CSS...

    页面宽度自适应 jquery动态设置css样式

    结果可能在最初是设计的时候就有问题，设计的样式是这样的，点击父页面（页面宽度设置为100%）上的一个按钮整个页面往右侧移动页面比例为原来的50%，左侧弹出一个dialog页面，占整个页面的50%，结果dialog和原页面不...

    JSON-handle是一款对JSON格式的内容进行浏览和编辑，以树形图样式展现JSON文档，并可实时编辑

    3.如下图所示，点击设置的功能按钮，我们就进入了此插件的设置界面，里面有中文的设置支持，变成中文后我们操作起来就能更加的顺风顺水啦！ jsonhandle 4.设置插件支持的语言为中文，设置成中文风格的界面之后，我们...

    MicrosoftHTMLHelpWorkshopV1.3汉化版.rar

    目录表就好像是一本书的目录。该文件不是必需的，如果创建的 chm 文件没有导航嵌窗，就可以不创建 .hhc 文件，这样一来 HTML 中的跳转就要借助其内部的超级链接了。［创建方法］ （3）索引文件［Index -- .hhk...

    WX-ComponentDemo:微信小程序-自定义组件demo-悬浮按钮弹出菜单

    之前看七月老师的视频，介绍到template的时候，七月老师说，这个template有一个缺点，大概意思就是封装度不够，只模板化了页面和样式，逻辑那些写不了。我也很困惑这件事，今天了解到自定义组件这个概念，就试了试，...

    PinnedAndPulledHeaderListView:仿QQ好友列表分组悬停，自定义Header，下拉刷新结合Demo

    pulltorefresh用的android.v4里面自带的，好像知乎也是悬停和分组用的网上的，然后我把第一个分组的样式改成了自定义的menu菜单，并且清空了child.这样看上去就像一个自定义layout和listview一起滑动。

    楼中楼类贴吧论坛程序 v1.7

    1. 【修复】发主题按钮样式错误 2. 【修复】图片过大撑破帖子 3. 【修复】面包屑文字不对齐 4. 【修复】两个高危安全漏洞 5. 【修复】安装过程缓存文件残留 6. 【修复】手机版样式兼容问题 7. 【增加】未插入帖子的...

    Home-Materialize-css:使用Materialize CSS框架创建主页

    家化CSS 使用Materialize CSS框架创建主页 请参阅材料调色板 材料设计？ [材料设计入门视频]： : [3分钟内完成材料设计！]： : 材料设计原理 材质替换材质，将UI / ... 文本选择，手势含义，操作按钮的使用，搜索

    GExperts 1.32 For Delphi 7

    GExperts就是一个这样的免费而且优秀的软件（在我的印象中，好像只有控件包中的Rxlib和Mwedit能够与之媲美）。GExperts是一个Delphi的扩展功能软件，也叫做Experts，我现在使用的版本是1.32。 　下载完毕后，执行...

    利用输入法注入DLL

    运行一下看看，是不是窗体中标题栏和按钮上的文字都没有了，因为我们把函数 LpkDrawTextEx替换成自己的函数HookProc1了。这个函数有10个参数，其中几个好像是字符 串指针，似乎可以用来截获窗体要显示的文字，然后...

    十天学会ASP.net--我认为ASP.NET比ASP难很多，希望大家做好准备

    以前说到BUTTON控件CausesValidation=true/false来设置按钮提交的表单是不是被检验也就是这里的几个检验控件，如果CausesValidation=true的话按下按钮就会首先检测是不是都通过了检验控件的检验。 下面再说两点： ...

    JAVA上百实例源码以及开源项目

    　Java二进制IO类与文件复制操作实例，好像是一本书的例子，源代码有的是独立运行的，与同目录下的其它代码文件互不联系，这些代码面向初级、中级Java程序员。 Java访问权限控制源代码 1个目标文件 摘要:Java源码,...

    JAVA上百实例源码以及开源项目源代码

    　Java二进制IO类与文件复制操作实例，好像是一本书的例子，源代码有的是独立运行的，与同目录下的其它代码文件互不联系，这些代码面向初级、中级Java程序员。 Java访问权限控制源代码 1个目标文件 摘要:Java源码,...

    js使用小技巧

    style标签里的第一个样式 document.styleSheets[0].rules[0] 防止点击空链接时，页面往往重置到页首端。 ()"&gt;word 上一网页源 asp: request.servervariables("HTTP_REFERER") javascript: document....

Magicbox
Global site tag (gtag.js) - Google Analytics