Html
    Css
    Js

    
                        
/*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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

流光按钮(可自定义)

按钮很简单,只需要把css样式移入,声明一个按钮,调用htmleaf-content即可,按钮大小,样式可以定义

0