<!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   ...