<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>Button UI Kit</title>

<style type="text/css">

body{

  background: #35393d;

}

.controls_ui{ 

  width: 300px; 

  margin: 40px auto;

}

.button{

  color: #0f1214;

  text-shadow:0 1px 0 #484f58;

  margin-bottom: 20px;

  margin-right: 5px;

  border:1px solid #202124;

  box-shadow: 0 1px 0 #616a74 inset,0 1px 5px #212528;

  background: -webkit-linear-gradient(top,#474d54,#2f363d);

  background: -moz-linear-gradient(top,#474d54,#2f363d);

  background: -ms-linear-gradient(top,#474d54,#2f363d);

  background: -o-linear-gradient(top,#474d54,#2f363d);

  background: linear-gradient(top,#474d54,#2f363d);

}

.button:nth-child(3n){

  margin-right: 35px;

}

.button:hover{

  background: -webkit-linear-gradient(top,#5b6167,#30373e);

  background: -moz-linear-gradient(top,#5b6167,#30373e);

  background: -ms-linear-gradient(top,#5b6167,#30373e);

  background: -o-linear-gradient(top,#5b6167,#30373e);

  background: linear-gradient(top,#5b6167,#30373e);

}

.button:active{

  box-shadow: 0 1px #484c50;

  background: -webkit-linear-gradient(top,#232930,#3c4249);

  background: -moz-linear-gradient(top,#232930,#3c4249);

  background: -ms-linear-gradient(top,#232930,#3c4249);

  background: -o-linear-gradient(top,#232930,#3c4249);

  background: linear-gradient(top,#232930,#3c4249);


}

.round,

.square{

  width: 30px;

  height: 30px;

}

.round,

.roundbig{

  border-radius:15px;

}

.square,

.squarebig{

  border-radius:5px;

}

.button:after{

  display: block;

}

.round:nth-of-type(1):after,

.square:nth-of-type(4):after{

  content: "\2716";

}

.round:nth-of-type(2):after,

.square:nth-of-type(5):after{

  content: "\2714";

}

.round:nth-of-type(3):after,

.square:nth-of-type(6):after{

  content: "\271a";

}

.round:nth-of-type(7):after,

.square:nth-of-type(10):after{

  content: "\2717";

}

.round:nth-of-type(8):after,

.square:nth-of-type(11):after{

  content: "\2713";

}

.round:nth-of-type(9):after,

.square:nth-of-type(12):after{

  content: "\271d";

}

.roundbig,

.squarebig{

  width: 80px;

  height: 30px;

}

</style>

</head>

<body>

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

<div class="page">

<section class="demo">

<div class="controls_ui">

<button type="button" class="button round"></button>

<button type="button" class="button round"></button>

<button type="button" class="button round"></button>

<button type="button" class="button square"></button>

<button type="button" class="button square"></button>

<button type="button" class="button square"></button>





<button type="button" class="button round"></button>

<button type="button" class="button round"></button>

<button type="button" class="button round"></button>





<button type="button" class="button square"></button>

<button type="button" class="button square"></button>

<button type="button" class="button square"></button>





<button type="button" class="button roundbig">Button</button>

<button type="button" class="button roundbig">Button</button>

<button type="button" class="button roundbig">Button</button>





<button type="button" class="button squarebig">Button</button>

<button type="button" class="button squarebig">Button</button>

<button type="button" class="button squarebig">Button</button>

</div>

</section>

</div>

</body>

</html>

Button UI Kit CSS3美丽Buttonbutton的更多相关文章

  1. 免费素材：包含 250+ 组件的 DO UI Kit

    DO UI kit 现在可以免费用于 Photoshop 和 Sketch 了.它有超过130个屏幕,10个完整的主题以及250+的组件混合以创造惊人的应用.他们都是再混合和视网膜.最重要的是他们看起 ...

  2. EventRay UI Kit – Web & Mobile 的素材

    EventRay UI 工具包是一个免费的,可以现成使用的界面套件.包括多个为  Web 和移动应用设计的布局和 UI 元素.所有你需要做的就是下载这个 UI 工具包,点击源码下载打开的页面即可下载. ...

  3. Freebie: Material Design UI Kit

    点这里 Following the guidelines laid out by Google, this free UI kit has been designed so that you can ...

  4. Unity 游戏框架：UI 管理神器 UI Kit

    UI Kit 快速入门 首先我们来进行 UI Kit 的快速入门 制作一个界面的,步骤如下: 准备 生成代码 逻辑编写 运行 1. 准备 先创建一个场景 TestUIHomePanel. 删除 Hie ...

  5. [UI] MFD UI kit

    MFD UI kit https://dribbble.com/whaledesigned

  6. 从iOS 11 UI Kit中谈谈iOS 11的新变化

    北京时间9月20日凌晨1点,iOS 11终于迎来了正式版的推送,相信各位小伙伴已经在第一时间进行了升级.iOS 11毫无疑问是一次大规模的系统更新,UI.系统内核.锁屏等多方面都进行了不同程度的改进. ...

  7. 20 个免费开源的 CSS3 用户界面工具包

    ui.css Metro UI CSS Pure CSS jQuery jKit Solid HTML5/CSS3 UI Kit CSS3 UI Kit Alt CSS3 UI Kit MediaLo ...

  8. 帮助你实现漂亮界面的14套免费的 HTML/CSS 源码

    在网络上能找很多免费的 PSD 格式素材,但是很少有 HTML/CSS 界面组件下载.在这篇文章中,收集了14套免费的 HTML/CSS 界面源码分享给前端设计师和开发者们.这些组件包括按钮.滑块.表 ...

  9. 【翻译】22款HTML & CSS3 UI工具包免费下载

    下面盘点了22款适用于网页设计的HTML&CSS3 UI工具包,并且全部都是免费的哦!喜欢就赶紧 下载或收藏吧.这些免费工具可以加速你的网页开发进程,让你有更多时间专注于其他更重要的部分.由于 ...

随机推荐

  1. spark论坛

    http://spark.apache.org/ http://bbs.csdn.net/forums/spark http://spark.csdn.net/ http://tieba.baidu. ...

  2. 清华集训2014 day1 task3 奇数国

    题目 题目看起来好像很难的样子!其实不然,这是最简单的一道题. 算法 首先要注意的是: \(number \cdot x + product \cdot y = 1\) ,那么我们称\(number\ ...

  3. Materialized View in Oracle - Concepts and Architecture

    List all of MV inoracle: select owner, query, query_len from dba_mviews See content of aMV: select * ...

  4. 使Web Api 支持跨域资源共享(CORS)

    Reference:http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api Imp ...

  5. ADO.NET 2SqlDataAdapter、DataSet 的基本用法

    数据集完全独立于数据源,可以与数据源链接或者完全断开,其基本作用是为存储在内存缓存中的的数据提供关系视图 如果只是想读取和显示数据,则值需要使用数据读取器,尤其是处理大量数据的时候 如果需要处理数据, ...

  6. 挺苹果的声音，iPhone 5s的两处进步

    苹果iPhone 5s发布后的两处重大进步让我很关注,但看了网上众多网友的点评,又深深的被中国当前手机发烧友圈的这种屌丝文化所震撼,这不是一条正确的道路,这将把中国的手机产业引向歧途,所以我不得不说几 ...

  7. Nodejs 项目开发

    最近这几个月都在学习nodejs. 国内nodejs的资料相对较少,就我所搜索到的,CSDN目前的代码托管平台有不少从github弄过来的开源镜像,其它的不错的社区有cnodejs,byvoid的个人 ...

  8. 真机測试时的错误:No matching provisioning profiles found

    1.出现错误的原因是这种---- 公司接收一个外包项目,原来做真机測试的时候,用的是公司申请的苹果开发人员账号.如今项目结束了,准备上线,但客户要求使用客户自己的苹果开发人员是账号上线,于是就用客户的 ...

  9. 三篇IMO的文章

    http://column.iresearch.cn/b/201411/687499.shtml?from=singlemessage&isappinstalled=1 http://colu ...

  10. 拷贝构造函数和const成员函数

    实验原因 说明如何使用const描述保护类数据不会意外修改. 编译环境 vc6sp6 + win7x64 工程下载 copyConstruction_constMemberFunction.zip   ...