<! DOCTYPE html>
<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 (): after{
Content: "\2717";
}
. Round:nth-of-type (8): After,
. Square:nth-of-type (one): after{
Content: "\2713";
}
. Round:nth-of-type (9): After,
. Square:nth-of-type (): after{
Content: "\271D";
}
. Roundbig,
. squarebig{
width:80px;
height:30px;
}
</style>
<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>
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Button UI Kit CSS3 Nice button button
