Button UI Kit CSS3美丽Buttonbutton
<!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的更多相关文章
- 免费素材：包含 250+ 组件的 DO UI Kit
DO UI kit 现在可以免费用于 Photoshop 和 Sketch 了.它有超过130个屏幕,10个完整的主题以及250+的组件混合以创造惊人的应用.他们都是再混合和视网膜.最重要的是他们看起 ...
- EventRay UI Kit – Web & Mobile 的素材
EventRay UI 工具包是一个免费的,可以现成使用的界面套件.包括多个为 Web 和移动应用设计的布局和 UI 元素.所有你需要做的就是下载这个 UI 工具包,点击源码下载打开的页面即可下载. ...
- Freebie: Material Design UI Kit
点这里 Following the guidelines laid out by Google, this free UI kit has been designed so that you can ...
- Unity 游戏框架：UI 管理神器 UI Kit
UI Kit 快速入门 首先我们来进行 UI Kit 的快速入门 制作一个界面的,步骤如下: 准备 生成代码 逻辑编写 运行 1. 准备 先创建一个场景 TestUIHomePanel. 删除 Hie ...
- [UI] MFD UI kit
MFD UI kit https://dribbble.com/whaledesigned
- 从iOS 11 UI Kit中谈谈iOS 11的新变化
北京时间9月20日凌晨1点,iOS 11终于迎来了正式版的推送,相信各位小伙伴已经在第一时间进行了升级.iOS 11毫无疑问是一次大规模的系统更新,UI.系统内核.锁屏等多方面都进行了不同程度的改进. ...
- 20 个免费开源的 CSS3 用户界面工具包
ui.css Metro UI CSS Pure CSS jQuery jKit Solid HTML5/CSS3 UI Kit CSS3 UI Kit Alt CSS3 UI Kit MediaLo ...
- 帮助你实现漂亮界面的14套免费的 HTML/CSS 源码
在网络上能找很多免费的 PSD 格式素材,但是很少有 HTML/CSS 界面组件下载.在这篇文章中,收集了14套免费的 HTML/CSS 界面源码分享给前端设计师和开发者们.这些组件包括按钮.滑块.表 ...
- 【翻译】22款HTML & CSS3 UI工具包免费下载
下面盘点了22款适用于网页设计的HTML&CSS3 UI工具包,并且全部都是免费的哦!喜欢就赶紧 下载或收藏吧.这些免费工具可以加速你的网页开发进程,让你有更多时间专注于其他更重要的部分.由于 ...
随机推荐
- MDCC为移动开发者服务：一看、一聊、一聚
MDCC为移动开发者服务:一看.一聊.一聚-CSDN.NET MDCC为移动开发者服务:一看.一聊.一聚 发表于2013-11-05 20:54| 2698次阅读| 来源CSDN| 6 ...
- 重新签名apk文件（手工用命令行）
re-sign.jar中后自动去除签名这个方法,经试验不可用! 1.去除准备重新签名SinaVoice.apk软件本身的签名 将apk文件后缀改为.zip,然后从winrar中删除META-INF文件 ...
- QObject，有一个生存线程（慢慢体会）
moveToThread本来就是操作QObject的 比如把当前对象移到主线程里: myObject->moveToThread(QApplication::instance()-> ...
- linux c: core dump
1. core dump文件系统设置 http://www.cnblogs.com/no7dw/archive/2013/02/18/2915819.html 编译时需要输入-g才会生成coredum ...
- C#中System.Globalization.DateTimeFormatInfo.InvariantInfo怎么用
原文 C#中System.Globalization.DateTimeFormatInfo.InvariantInfo怎么用 在开发的时候,碰到下面这样一个问题: 在程序中显示当前系统时间,但是有一 ...
- 体系结构复习2——指令级并行（分支预測和VLIW）
第五章内容较多,接体系结构复习1 5.4 基于硬件猜測的指令级并行 动态分支预測是在程序运行时.依据转移的历史信息等动态确定预測分支方向.主要方法有: 基于BPB(Branch Prediction ...
- 进阶：案例三: Upload File using WebDynpro
1.节点创建,其中DATASOURCE存放uploadfile名称 2.layout布局 3.upload事件代码: method ONACTIONUPLOAD . DATA: lo_Node typ ...
- Python WxPython 的安装以及使用
WxPython 网址 学习网址 http://wiki.wxpython.org/How%20to%20Learn%20wxPython 安装网址 http://wiki.wxpython.org/ ...
- 高斯消元法~get√
高斯消元法,是线性代数中的一个算法,可用来求解线性方程组,并可以求出矩阵的秩,以及求出可逆方阵的逆矩阵.高斯消元法的原理是:若用初等行变换将增广矩阵 化为 ,则AX = B与CX = D是同解方程组. ...
- [Win]进程间通信——邮槽Mailslot
进程间通信 进程的地址空间是私有的.出于安全性的目的,如果一个进程不具有特殊的权限,是无法访问另外一个进程的内存空间的,也无法知道内存中保存的数据的意义.但是在一些具体的应用情况下需要多个进行相互配合 ...