Button UI Kit CSS3漂亮Button按鈕

2024-09-05 12:17:14

字體：大中小

來源：轉載

供稿：網友

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   id="iwvjtn8m0"   class="page">	<header id="header">		<hgrounp class="white">			<h1>Button UI Kit</h1>			<h2>作者：藤藤(如有更好建議或疑問請加群：1041263)<h2>		</hgrounp>	</header>	<section class="demo"><div   id="iwvjtn8m0"   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>

上一篇：CSS實現的鼠標選中圖片時的Hover效果

下一篇：CSS3放大鏡