好看的CSS按钮

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

<link rel="stylesheet" type="text/css" href="style.css" />

 </head>

 <body>

  <div class="demo">

        <a href="#" class="button blue">蓝色</a>

        <a href="#" class="button blue bigrounded">Rounded</a>

        <a href="#" class="button blue medium">Medium</a>

        <a href="#" class="button blue small">Small</a>

        <input class="button blue" type="button" value="Input Element" />

        <button class="button blue">Button Tag</button>

    </div>

    <div class="demo">

        <a href="#" class="button green">绿色</a>

        <a href="#" class="button green bigrounded">Rounded</a>

        <a href="#" class="button green medium">Medium</a>

        <a href="#" class="button green small">Small</a>

        <input class="button green" type="button" value="Input Element" />

        <button class="button green">Button Tag</button>

    </div>

    <div class="demo">

        <a href="#" class="button white">灰白</a>

        <a href="#" class="button white bigrounded">Rounded</a>

        <a href="#" class="button white medium">Medium</a>

        <a href="#" class="button white small">Small</a>

        <input class="button white" type="button" value="Input Element" />

        <button class="button white">Button Tag</button>

    </div>

    <div class="demo">

        <a href="#" class="button orange">橘红</a>

        <a href="#" class="button orange bigrounded">Rounded</a>

        <a href="#" class="button orange medium">Medium</a>

        <a href="#" class="button orange small">Small</a>

        <input class="button orange" type="button" value="Input Element" />

        <button class="button orange">Button Tag</button>

    </div>

 </body>

</html>

.button {

    display: inline-block;

    outline: none;

    cursor: pointer;

    text-align: center;

    text-decoration: none;

    font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;

    padding: .5em 2em .55em;

    text-shadow: 0 1px 1px rgba(0,0,0,.3);

    -webkit-border-radius: .5em;

    -moz-border-radius: .5em;

    border-radius: .5em;

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

    box-shadow: 0 1px 2px rgba(0,0,0,.2);

}

.button:hover {

    text-decoration: none;

}

.button:active {

    position: relative;

    top: 1px;

}

.bigrounded {

    -webkit-border-radius: 2em;

    -moz-border-radius: 2em;

    border-radius: 2em;

}

.medium {

    font-size: 12px;

    padding: .4em 1.5em .42em;

}

.small {

    font-size: 11px;

    padding: .2em 1em .275em;

}

/* blue */

.blue {

    color: #d9eef7;

    border: solid 1px #0076a3;

    background: #0095cd;

    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));

    background: -moz-linear-gradient(top,  #00adee,  #0078a5);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');

}

.blue:hover {

    background: #007ead;

    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));

    background: -moz-linear-gradient(top,  #0095cc,  #00678e);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');

}

.blue:active {

    color: #80bed6;

    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));

    background: -moz-linear-gradient(top,  #0078a5,  #00adee);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');

}

/* green */

.green {

    color: #e8f0de;

    border: solid 1px #538312;

    background: #64991e;

    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));

    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');

}

.green:hover {

    background: #538018;

    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));

    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');

}

.green:active {

    color: #a9c08c;

    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));

    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');

}

/* white */

.white {

    color: #606060;

    border: solid 1px #b7b7b7;

    background: #fff;

    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));

    background: -moz-linear-gradient(top,  #fff,  #ededed);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');

}

.white:hover {

    background: #ededed;

    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));

    background: -moz-linear-gradient(top,  #fff,  #dcdcdc);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');

}

.white:active {

    color: #999;

    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));

    background: -moz-linear-gradient(top,  #ededed,  #fff);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');

}

/* orange */

.orange {

    color: #fef4e9;

    border: solid 1px #da7c0c;

    background: #f78d1d;

    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));

    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');

}

.orange:hover {

    background: #f47c20;

    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));

    background: -moz-linear-gradient(top,  #f88e11,  #f06015);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');

}

.orange:active {

    color: #fcd3a5;

    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));

    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');

}

650) this.width=650;" src="http://img1.51cto.com/attachment/201312/143640728.png" title="QQ截图20131214143617.png" alt="143640728.png" />

好看的CSS按钮的更多相关文章

漂亮的CSS按钮样式集以及在线生成工具
以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...
css 样式（checkbox开关、css按钮）
checkbox开关 css .iosCheck { /* Blue edition */ } .iosCheck input { display: none; } .iosCheck i { dis ...
CSS 按钮
总结有关按钮的各种样式㈠基本按钮样式看一下没有进行css样式设计时按钮的样子与进行样式设计的按钮样子 <!DOCTYPE html> <html> <head> ...
css 按钮悬停效霓虹灯特效
css 按钮悬停效霓虹灯特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
BUTTONS V. 2.0.0——CSS按钮库
BUTTONS-V2-CSS库样式职责 CSS库样式职责分离优点模块样式命名更清晰化易于维护.扩展性强动画效果——修改样式后有过度效果,默认样式源码如下 <!DOCTYPE html&g ...
css按钮自适应
原理:利用a标签和i标签各自一个背景组合成为按钮,达到自适应. <!DOCTYPE html> <html> <head> <meta charset=&qu ...
四个好看的CSS样式表格
文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格和上面差点儿相 ...
有用好看的CSS+JS+table 导航
预览效果图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dis ...
html网页什么样的字体最好看，css设置各种中文字体样式代码
css代码如下:{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,Mi ...

随机推荐

oracle触发器调用java程序
1.创建java程序:接收存储过程传递的参数,发送socket通信. create or replace and compilejava source named jym as import java ...
Hive 的 map join
学习自 http://blog.csdn.net/xqy1522/article/details/6699740 1. Map Join 的使用场景: 关联操作中有一张表非常小不等值的链接操作 2. ...
Spark Shell & Spark submit
Spark 的 shell 是一个强大的交互式数据分析工具. 1. 搭建Spark 2. 两个目录下面有可执行文件: bin 包含spark-shell 和 spark-submit sbin 包含 ...
【BZOJ-2427】软件安装 Tarjan + 树形01背包
2427: [HAOI2010]软件安装 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 960 Solved: 380[Submit][Status ...
【BZOJ-2438】杀人游戏 Tarjan + 缩点 + 概率
2438: [中山市选2011]杀人游戏 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1638 Solved: 433[Submit][Statu ...
51nod平均数
#include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...
codevs1138 聪明的质监员
题目描述 Description 小 T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有n 个矿石,从1到n 逐一编号,每个矿石都有自己的重量wi 以及价值vi.检验矿产的流程是:见图 ...
你应该了解Nginx的7个原因
Nginx ("engine x")是一个高性能的HTTP和反向代理服务器,也是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器 1 负载均衡实 ...
用Python写了个抓图小脚本
看上这个网页上一张图了,可惜他没有提供右键另存为,看了下网页代码,是可以找到图片原始链接的!但是因为没法和现实的图片一一对应,图又多,所以找起来还是麻烦...然后,我就想用 Python 把他们全部拉 ...
alias重启终端失效的问题
如果使用命令 alias xx='xxxx' 那么登出以后,别名就会失效.下次登入的时候就不能用了. 为了保持别名可以把它写入.bashrc 在.bashrc的最后写入想要的别名,比如 alias z ...

好看的CSS按钮

好看的CSS按钮的更多相关文章

随机推荐

热门专题