/*body {
font-family:'Ubuntu',sans-serif;
}
*/
.button {
display:block;
position:relative;
background:#00B16A;
color:#fff;
width:160px;
height:50px;
line-height:50px;
text-align:center;
font-family:'Ubuntu',sans-serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
margin:50px auto 0;
border-radius:2px;
overflow:hidden;
-webkit-transition:all 0.15s ease-in;
transition:all 0.15s ease-in;
}
.button:hover {
background:#26C281;
}
.button:before {
content:' ';
position:absolute;
background:#fff;
width:25px;
height:50px;
top:0;
left:-45px;
opacity:0.3;
-webkit-transition:all 0.25s ease-out;
transition:all 0.25s ease-out;
-webkit-transform:skewX(-25deg);
transform:skewX(-25deg);
}
.button:hover:before {
width:45px;
left:205px;
}
按钮很简单,只需要把css样式移入,声明一个按钮,调用htmleaf-content即可,按钮大小,样式可以定义