<!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. c语言实现atoi和itoa函数。

    首先看atoi函数: C语言库函数名: atoi 功 能: 把字符串转换成整型数. 名字来源:ASCII to integer 的缩写. 原型: int atoi(const char *nptr); ...

  2. 基于visual Studio2013解决C语言竞赛题之0904文件排序

       题目

  3. TortoiseSVN 文件关联图标不显示的解决方法

    对于SVN来说,因为每个图标都代表着不同的含义,预示着不同的状态,是指示灯的作用,如果没有正确的图标很可能造成数据的丢失等 之前看了网上其他人写的帖子,,有一些是直接删除注册表下“ShellIconO ...

  4. javascript每日一练（五）——BOM

    一.BOM打开,关闭窗口 window.open(); window.close(); <!doctype html> <html> <head> <meta ...

  5. Project configuration is not up-to-date with pom.xml错误解决方法

    导入一个Maven项目之后发现有一个如下的错误: Project configuration is not up-to-date with pom.xml. Run project configura ...

  6. 08-使用for循环输出杨辉三角（循环）

    /** * 使用循环输出杨辉三角 * * */ public class Test6 { public static void main(String[] args) { // 创建二维数组 int ...

  7. Gitolite v3安装配置指南

    使用gitolite对git仓储进行权限配置 gitolite在近期做了很多代码改动,升级到了v3版本,而我使用的是v3.5.2.在<Git权威指南>中所提及的是v2版本,有很多东西已经不 ...

  8. Ubuntu下安装ADT（图文教程）

    个人感觉Ubuntu下安装ADT跟在Windows大同小异 一.装上JDK和Eclipse 如果还没有装上的,请参考我前面的博文: http://blog.csdn.net/ljphhj/articl ...

  9. C++中 auto自己主动变量，命名空间，using作用以及作用域

     1.autokeyword的用途 A:自己主动变量.能够自己主动获取类型,输出,类似泛型 B:自己主动变量,能够实现自己主动循环一维数组 C:自己主动循环的时候,相应的必须是常量 2.auto自 ...

  10. Entity - 使用EF框架进行增删改查 - 数据库先行

    数据库先行:先创建数据库,然后进行增删查该操作. 要操作的表结构(表名:Tb_Category): 创建一个控制台程序: 添加一个ADO.NET实体数据模型: 1.对控制台程序右键 2.选择ADO.N ...