好看的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 ...

随机推荐

查看MySQL是否支持InnoDB引擎以及不支持的解决办法
通过命令行进入mysql SHOW variables like "have_%"; 显示结果中会有如下3种可能的结果: have_innodb YES have_innodb N ...
卸载移动硬盘出现 device is busy
umount /dev/sdb1 # device is busy fuser -m -v /dev/sdb1 # 查看 fuser -m -k /dev/sdb1 # 杀死进程
【BZOJ-2453&2120】维护队列&数颜色分块 + 带修莫队算法
2453: 维护队列 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 653 Solved: 283[Submit][Status][Discuss] ...
jQuery 效果 - 隐藏和显示
$('...').hide();//隐藏 $('...').show();//显示以上使用需要针对特定的功能单独使用,如果是混用,那么就要有标志位去实现,而通常两者更高级的一步到位实现: $('.. ...
AutoIt3（AU3）开发的智能驱动安装工具，用于系统封装，支持参数静默启动
项目相关地址源码:https://github.com/easonjim/Smart_Driver bug提交:https://github.com/easonjim/Smart_Driver
Oracle 11g新特性
文章转自网络 Oracle 11g于2007年7月11日美国东部时间11时(北京时间11日22时)正式发布,11g是甲骨文公司30年来发布的最重要的数据库版本,根据用户的需求实现了信息生命周期管理(I ...
Android成长日记-WebView使用
在App中有时候会看到一些页面是以网页的形式展示,其原理就是运用了WebView,下面予以讲述WebView 1. 使用Intent调用系统浏览器或者第三方浏览器打开网页调用系统浏览器打开页面 Ur ...
Scala高阶函数示例
object Closure { def function1(n: Int): Int = { val multiplier = (i: Int, m: Int) => i * m multip ...
Java中如何遍历Map对象的4种方法
在java中遍历Map有不少的方法.我们看一下最常用的方法及其优缺点. 既然java中的所有map都实现了Map接口,以下方法适用于任何map实现(HashMap, TreeMap, LinkedHa ...
【Alpha阶段】第二次Scrum例会
燃尽图软件存在bug,正在排查修复:(已修复)由于时区设置到了美国,图表显示有问题. 会议信息时间:2016.10.18 22:00 时长:1h 地点:大运村1号公寓5楼楼道类型:设计阶段阶段性会 ...

好看的CSS按钮

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

随机推荐

热门专题