Button UI Kit CSS3漂亮Button按钮

2020-01-27 14:17:56

字体：大中小

来源：转载

供稿：网友

Button UI Kit CSS3漂亮Button按钮，将Button UI Kit的设计图转换成CSS3的DEMO，制作的方法也相对简单，主要用到了CSS3的渐变gradient 、阴影text-shadow和box-shadow、还有就是字体icon的制作@font-face。但话说回来，属性简单，制作方法简单，但对渐变色的配置，阴影效果的拿捏还是要一定的技术，不信，你试试。

<!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">	<header id="header">		<hgrounp class="white">			<h1>Button UI Kit</h1>			<h2>作者：藤藤(如有更好建议或疑问请加群：1041263)<h2>		</hgrounp>	</header>	<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>

上一篇：CSS3放大镜

下一篇：CSS实现的鼠标选中图片时的Hover效果