<!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. android 4.0后不允许屏蔽掉home键

    屏蔽home键的方法 // 屏蔽掉Home键 public void onAttachedToWindow() { this.getWindow().setType(WindowManager.Lay ...

  2. Quartz中文文档使用

    Quartz中文使用说明文档,内容相当详细,有需要的码友们可以看看!! 好东西要分享!! 下面是文档的内容目录,附上下载的地址:点击打开链接,下载文档 中文版目录总汇及内容提要 第一章. 企业应用中的 ...

  3. dsdfdsfd

    aibang.com/show/1816725179-1268699976/product/7069113.html aibang.com/show/1816725179-1268699976/pro ...

  4. Xcode6使用storyboard在TabBarController上建立三个以上Item

    在Xcode5上做以上的操作没有问题,这次是要在Xcode6上实现之,特记录以备用. 首先新建一个storyboard文件.取名Custom.storyboard.拖动菜单添加一个TabBarComt ...

  5. 使用代码辅助生成工具CodeSmith -- 生成NHibernate的映射文件

    首先下载CodeSmith工具:在百度云中,在CodeSmith文件夹中. 安装,使用激活工具激活. 然后下载NHibernate模板,也是在百度云中,在CodeSmith文件夹中. 之后直接点击NH ...

  6. 面试中关于Java中涉及到知识点（转）

    本篇文章会对面试中常遇到的Java技术点进行全面深入的总结,帮助我们在面试中更加得心应手,不参加面试的同学也能够借此机会梳理一下自己的知识体系,进行查漏补缺. 1. Java中的原始数据类型都有哪些, ...

  7. <Win32_12>程序员求爱的创意程序——升级版^_^

    前段时间,我编写了一个创意程序,并用于向自己目前的女朋友表白,结果效果还不错,得到了她的芳心. 于是我将自己的创意程序共享到csdn资源上,大多数网友认为创意不错,就是简单了些——呵呵,其实我个人也这 ...

  8. Git本地分支版本号过低导致的push错误 error: failed to push some refs to ... 及兴许amend

    今天在用git的时候遇到了一个问题.在想远程分支push的时候,出现了以下的错误: ! [remote rejected] master -> refs/for/master (change 1 ...

  9. Ubuntu下使用sshfs挂载远程目录到本地（和Windows挂载盘一样）

    访问局域网中其他Ubuntu机器,在不同机器间跳来跳去,很是麻烦,如果能够把远程目录映射到本地无疑会大大方面使用,就像Windows下的网络映射盘一样.在Linux的世界无疑也会有这种机制和方式,最近 ...

  10. Qt递归拷贝和删除目录

    最近在翻看项目代码时,看到了这两个函数,想到这个功能十分常用,因此拿出来与大家分享,希望对大家有用.几点说明: 1.记得当初写代码那会,是参考了网上的帖子写的,做了一点小修改.因此代码源于网络. 2. ...