<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS3 3D渐变button代码</title>

 <style>

        body

        {

            background: #e5e5e5;

            text-align: center;

        }

        .button

        {

            margin: 10px;

            text-decoration: none;

            font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/

            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; /* Fallback style */

            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;            

        }

        .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

        {

            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>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

 <h1>Cross-browser CSS gradient buttons</h1>

            <a href="#" class="button button-khaki"><span>Button</span></a>

            <a href="/" class="button button-blue"><span>Button</span></a>

            <a href="#" class="button button-brown"><span>Button</span></a>

            <br>

            <a href="#" class="button button-red"><span>Button</span></a>

            <a href="#" class="button button-purple"><span>Button</span></a>

            <a href="#" class="button button-green"><span>Button</span></a>

            <br>

            <a href="#" class="button button-black"><span>Button</span></a>

            <a href="#" class="button button-orange"><span>Button</span></a>

            <a href="#" class="button button-silver"><span>Button</span></a>

</body>

</html>

9种样式CSS3 渐变button集的更多相关文章

  1. 几种常用CSS3样式

    在我们日常工作中,由于考虑到浏览器的兼容性,所以很少用CSS3样式.关于其标准,W3C 仍然在对 CSS3 规范进行开发.不过,现代浏览器已经实现了相当多的 CSS3 属性.最近学习了CSS3,发现功 ...

  2. 再说CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  3. CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  4. css3渐变(Gradients)

    <html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...

  5. Css3渐变(Gradients)-径向渐变

    CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...

  6. CSS3渐变(Gradients)-线性渐变

    CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...

  7. css3渐变详解

    今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色) ...

  8. css3渐变之线性渐变

    css3定义了两种类型的渐变,即线性渐变和径向渐变.这里我要说的是线性渐变. 为了创建一个线性渐变,你必须至少定义两种颜色结点.颜色结点即你想要呈现平稳过渡的颜色.同时,你也可以设置一个起点和一个方向 ...

  9. CSS3渐变——径向渐变

    上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...

随机推荐

  1. CAD参数绘制多段线（网页版）

    多段线又被称为多义线,表示一起画的都是连在一起的一个复合对象,可以是直线也可以是圆弧并且它们还可以加不同的宽度. 主要用到函数说明: _DMxDrawX::PathLineTo 把路径下一个点移到指定 ...

  2. hibernate5.3版本出现hibernate中The server time zone value“乱码”问题的解决办法。

    <!-- 配置关于数据库连接的四个项 driverClass url username password --> <property name="hibernate.con ...

  3. react入门（下）

    react生命周期 1. 组件的三个生命周期状态: * Mount:插入真实 DOM * Update:被重新渲染 * Unmount:被移出真实 DOM2. React 为每个状态都提供了两种勾子( ...

  4. DIV可编辑后，与限制输入及光标偏移的纠葛

    前言 最近在弄个人的网站,偶然间发现DIV可以设置编辑模式,之前设计的方案在此功能上需要限制输入的长度.网上搜索了一波,综合搜索的结果,考虑使用的监听事件有:keydown .textInput .i ...

  5. CSS+DIV命名

    原地址:http://www.cnblogs.com/hylaz/archive/2012/10/27/2742743.html#2521377 页头:header 登录条:loginBar 标志:l ...

  6. C#上位机开发（三）—— 构建SerialAssistant雏形

    上一篇简单介绍了C#的一些基本知识,并成功的Hello,World,那么从这篇开始,我们来自己动手写一个串口助手: 1.构思功能 串口助手在单片机开发中经常被用来调试,最基本的功能就是接收功能和发送功 ...

  7. javascript倒计时代码及倒计时弹窗

    在前端开发中,难免会用到倒计时.如做的双十一活动,在距活动开始的半个月前需要做些宣传工作,需要告知用户优惠活动什么时候开始.这个时候就要用到倒计时,如在整站的某个页面提醒用户活动什么时候开始等.而在活 ...

  8. 经典算法入门 列表C/C++

    排序:插入排序.选择排序.冒泡排序.归并排序.快速排序.基数排序.计数排序.桶排序 查找:二分查找 树:先根.中根.后跟遍历 图:深度优先.广度优先.最小生成树.单元最短路径.全成对最短路径 动态规划 ...

  9. 7-9 旅游规划（25 分）（Dijkstra最短路径算法）

    有了一张自驾旅游路线图,你会知道城市间的高速公路长度.以及该公路要收取的过路费.现在需要你写一个程序,帮助前来咨询的游客找一条出发地和目的地之间的最短路径.如果有若干条路径都是最短的,那么需要输出最便 ...

  10. hdu 4325

    #include<stdio.h>//数据弱线段树延迟更新水过 #define N 100100 struct node { int x,y,yanchi,num; }a[N*4]; vo ...