/*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即可,按钮大小,样式可以定义