51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

Button UI Kit CSS3漂亮Button按钮

时间:2017-08-15 11:12点击:

代码如下


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

51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开