Production steps:
One,
The following code uses the CSS3 prefix script prefixfree.js to omit CSS3 prefixes "-moz", "-webkit", "O", "-ms"
The
code is as follows:
<head>
<meta charset= "Utf-8" >
<title>button</title>
<script src= "js/jquery.js" type= "Text/javascript" ></script>
<script src= "js/prefixfree.min.js" type= "Text/javascript" ></script>
<link rel= "stylesheet" type= "Text/css" href= "Css/button.css"/>
<script type= "Text/javascript" >
/* Here to use the fade effect to try * *
$ (function () {
$ (". BT"). CSS ("opacity", "1");
});
</script>
</head>
Second, <body> tag structure
The
code is as follows:
<body>
<div class= "BT" >
<div class= "button" ></div>
<div class= "Button2" ></div>
<div style= "Clear:both" > </div>
</div>
</body>
Three, CSS code
The
code is as follows:
* {
padding:0;
margin:0;
}
/* Clear Floating/
. clearfix:after {
content: "";
display:table;
Clear:both;
}
html, body {
height:100%;
}
Body {
font-family: "Microsoft Yahei";
background: #E1E1E1;
font-weight:300;
font-size:15px;
color: #333;
Overflow:hidden;
}
a {
Text-decoration:none;
}
/* Button Shadow no expansion * *
. BT {
margin:100px Auto;
Display:block;
width:350px;
opacity:0;
border-bottom:1px solid #C5C5C5;
border-top:1px solid #C5C5C5;
box-shadow:0 1px 0 #F6F6F6, 0 1px 0 #F6F6F6 inset;
Transition:all 0.5s ease-in;
}</p> <p>.button:before,. Button2:before {
content: "";
width:130px;
height:130px;
Display:block;
Z-index:-1;
position:relative;
background: #ddd;
left: -15px;
top: -15px;
border-radius:65px;
box-shadow:inset 2px 2px 4px rgba (0,0,0,0.4);
}
. Button:after,. button2:after {
content: "Register";
Color: #09F;
font-size:20px;
width:100%;
height:100%;
line-height:100px;
Text-align:center;
Position:absolute;
top:0;
Display:block;
}
. button2:after {
content: "Login";
word-spacing:25px;
color: #A0D989;
}
. Button,. button2 {
Float:left;
margin:50px Auto;
Cursor:pointer;
height:100px;
width:100px;
Display:block;
position:relative;
Color:black;
Text-align:center;
line-height:100px;
border-radius:50px;
box-shadow:2px 2px 4px rgba (0,0,0,0.4);
background: #FFF;
Transition:all 0.5s ease-in;
}
. button {
Float:left;
}
. button2 {
Float:right;
}
OK, finish the production. Is it so simple that people can't afford to lift their spirits? Let's try to do it quickly. Again the demo address to the beginning of the article has been given oh, look for AH.
Let's share a few web sites that make CSS3 buttons online:
1,live Tools is an online UI production tool that provides buttons, forms, icon icons, and ribbons tools to configure parameters online to generate the effect code you need.
2,css3 button Generator is a simple button generation tool, he can produce two kinds of state of the button effect, of course, if you need the other state of the Next button effect, it is necessary to make some parameters on the basis of changes, relatively troublesome.
3,button Generator produces the same button tool as the picture effect.
4,webarti CSS3 button Maker is a very powerful button online generation tool, he offers a number of different button effects for you to refer to, you can say simply choose to make the button you need to think about the time you spend.
