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

随机推荐

Node.js的net模块
net模块提供了一个异步网络包装器,用于TCP网络编程,它包含了创建服务器和客户端的方法创建TCP服务器 net.createServer方法创建客户端去连接服务器 net.connect方法简 ...
Leetcode Find the Duplicate Number
最容易想到的思路是新开一个长度为n的全零list p[1~n].依次从nums里读出数据,假设读出的是4, 就将p[4]从零改成1.如果发现已经是1了,那么这个4就已经出现过了,所以他就是重复的那个数 ...
用WebBrowser采集渲染后的HTML页面
主要用于微信的文章采集,如果用单纯的HttpClient采集,会出现页面无法渲染的情况: 经过研究发觉公众文章html页面是经过渲染之后显示的,那么思路来了,如果在dotnet的环境下,用WebBro ...
jpa和hibernate注解
http://www.objectdb.com/api/java/jpa/JoinColumns 用hibernate和jpa annotation 大概一年多了,今天闲来无事,对他们关联关系元数据写 ...
MVC5-1 ASP.NET的管道流
MVC5 和WebForm的区别 WebForm是一个Page贯穿了一个.CS代码. 1对1 = 耦合在一起 MVC在Controller中将 bihind和page进行了分离. 多对多 = 松耦合 ...
JSP+Servlet+javabean+mysql实现页面多条件模糊查询
需求: 一般列表页上面会有一个查询框,有各种的查询条件组合,一般都采用模糊查询方式 ,以下以自己做的实例来说明一下实现方法: 需要实现的界面原型:要满足条件: 1.单选分类,点GO按扭 2.单独输入标 ...
java 图像灰度化与二值化
转载:http://www.chinasb.org/archives/2013/01/5053.shtml 1: package org.chinasb.client; 2: 3: import ja ...
Linux学习之CentOS--CentOS6.下Mysql数据库的安装与配置
跟着配置,顺利配置完成 http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/07/3003278.html
css中关于居中的那点事儿
css中关于居中的那点事儿关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
C#------如何判断输入的是否为纯数字
private void Btn_OK_Click(object sender, EventArgs e) { IDormitoryAdminCardService aservice = new Do ...

好看的CSS按钮

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

随机推荐

热门专题