<!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. 基于visual Studio2013解决C语言竞赛题之0810链表去重

     题目

  2. 织梦sitemap模板获取文章列表

    分析了一下makehtml_map.php?dopost=site这个文件,发现生成视图用的是dedetag.class.php文件,有点简单.不能使用织梦的很多标签,例如: {dede:arclis ...

  3. cocos2d-x on wp8架构简单介绍

    1,基于C++的开发架构 支持3大移动平台以及3大桌面平台. 分为图形,声音,物理3大模块,另外还有脚本的导出. 在wp8/win32上的图形是基于d3d的,而在其它平台是基于opengl/openg ...

  4. Java的位运算符具体解释实例——与（&amp;）、非（~）、或（|）、异或（^）

    位运算符主要针对二进制,它包含了:“与”.“非”.“或”.“异或”.从表面上看似乎有点像逻辑运算符,但逻辑运算符是针对两个关系运算符来进行逻辑运算,而位运算符主要针对两个二进制数的位进行逻辑运算.以下 ...

  5. Android_Service组件详解

    1.Service概述 Service服务是一个没有用户界面的在后台运行执行操作的应用组件,其它组件可以通过Intent意图启动这个Service去完成特定的功能,比如通过Service可以完成播放音 ...

  6. kali 国内镜像源，以及PD_tools,Vm_tools的安装

    kali 系统apt-get 更新镜像源,往上分享的有,这里整理下 中科大kali源 deb http://mirrors.ustc.edu.cn/kali sana main non-free co ...

  7. hdu1104 Remainder bfs找算式是否有解……

    须要注意的是,进行模运算剪枝-- #include<iostream> #include<queue> #include<cstdlib> #include< ...

  8. Qt之多线程

    源地址:http://blog.csdn.net/liuhongwei123888/article/details/6072320 Qt 是一种基于 C++ 的跨平台 GUI 系统,能够提供给用户构造 ...

  9. org.apache.hadoop.ipc.Client: Retrying connect to server异常的解决

    检查发现是DataNode一直连接不到NameNode. 检查各个节点在etc/hosts中的配置是否有127.0.1.1 xxxxxx.如果有把其屏蔽或者删除,重启各节点即可. 原因:127.0.1 ...

  10. 查看 ios 真机调试log，导出log

    使用Xcode 在模拟器李敏运行的时候,可以直接通过xcode 查看log,但是真机测试的时候,xcode 却无法获取到,对于日志输出,可以先保存到真机上,之后通过iTunes 导出即可 修改源码 此 ...