Button UI Kit CSS3漂亮Button按钮

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-12 10:25:15

Button UI Kit CSS3漂亮Button按钮的相关文章

css3漂亮的按钮

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name

CSS3 3D分页按钮样式

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>石家庄礼品公司</title><style>.ui-page{border: 0px;background: #37578C;background: -webkit-linear-gradient(#37578C, #608BAE);background: -moz-linear-grad

使用CSS3制作漂亮的按钮

我给大家介绍一下如何使用CSS3来制作一个圆角阴影.渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,span,p,a,button,input等等. 这些纯CSS代码制作的按钮大小可以根据字体大小自动调整,渐变色背景可以兼容各浏览器,并且有正常.鼠标滑向.点击三种状态样式,当然,如果您的浏览器不支持CSS3,那么按钮将没有圆角和阴影效果. 教程地址:http://www.helloweba.com/v

unity4.6 Beta版 UI控件之Button

最近需求,需要用到4.6版本uGui了,所以抽时间来学习学习,就UI控件在Unity工具里创建预设这块来说相比较于NGUI,我觉得是没有什么太大的区别的. 比如:Canvas--Camera . Text--Label.ImageMask-- Panel 等. 可能是目前4.6版本还不稳定,其UI控件下所挂载的组件脚本代码我们是没法直接点击脚本看到更别说在代码里直接调出修改了,这点就目前来说确实没有NGUI方便. 好了"方不方便"恐怕并不能直接影响每次unity版本的更新带给我们的惊喜

button点击切换,获取按钮ID

<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style> .sms-type button{ width: 60px; height: 30px; margin

Std UI Kit 0.1版本发布

Std UI Kit是一套可以帮助你大幅缩短工作进程的高性能Javascript UI组件合集,它包含了非常全面的常用UI组件,同时提供了一套完整的用户界面解决方案,它能轻松的让你构建出一套桌面级的应用. Std UI Kit 包含的全部组件都是使用StdJS的Std.ui模块创建的,可以自由的继承,扩展. StdJS网站  http://www.stdjs.com Std UI Kit 网站 http://ui.stdjs.com Std UI Kit 文档 http://doc.stdjs.

一款基于jquery漂亮的按钮

之前为大家分享了好多css3实现的按钮.今天给大家分享一款基于jquery漂亮的按钮.这款按钮背景下用了一张图片.当鼠标经过的时候背景用半透明div遮住.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <a class="btn" data-js="btn"><span class="btn-inr"><span class="txt-a">See This Butt

[CSS3] 动画暗角按钮

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ position:relative; text-align: center; background:#212322; } h1{ color:#1A897A; font-family: &q

Freebie: Material Design UI Kit

点这里 Following the guidelines laid out by Google, this free UI kit has been designed so that you can easily get your next Material Design project kickstarted quickly. Every element, widget, button and form within the kit can be fully customised as per