Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
body {
	font-size:14px;
	background:rgba(0,0,0,0.8);
	color:#555;
}
.container {
	width:1000px;
	margin:0 auto;
}
.container-div1 {
	margin-top:50px;
	background:#fff;
	height:500px;
}
.z-btn {
	margin-top:10px;
	overflow:hidden;
}
.z-btn1 {
	width:150px;
	height:50px;
	line-height:50px;
	background:#019067;
	text-align:center;
	margin-left:20px;
	color:#fff;
	position:relative;
	top:15px;
	float:left;
}
.z-btn2 {
	width:150px;
	height:50px;
	line-height:50px;
	background:#019067;
	text-align:center;
	margin-left:20px;
	color:#fff;
	position:relative;
	top:15px;
	float:left;
}
.z-btn3 {
	width:150px;
	height:50px;
	line-height:50px;
	background:#019067;
	text-align:center;
	margin-left:20px;
	color:#fff;
	position:relative;
	top:15px;
	float:left;
}
.z-btn4 {
	width:150px;
	height:50px;
	line-height:50px;
	background:#019067;
	text-align:center;
	margin-left:20px;
	color:#fff;
	position:relative;
	top:15px;
	float:left;
}
.z-btn5 {
	width:150px;
	height:50px;
	line-height:50px;
	background:#019067;
	text-align:center;
	margin-left:20px;
	color:#fff;
	position:relative;
	top:15px;
	float:left;
}
.z-btn6 {
	width:150px;
	height:50px;
	line-height:50px;
	background:#019067;
	text-align:center;
	margin-left:20px;
	color:#fff;
	position:relative;
	top:15px;
	float:left;
}
.z-btn7 {
	width:150px;
	height:50px;
	line-height:50px;
	background:#019067;
	text-align:center;
	margin-left:20px;
	color:#fff;
	position:relative;
	top:15px;
	float:left;
}
.z-btn8 {
	width:150px;
	height:50px;
	line-height:50px;
	background:#019067;
	text-align:center;
	margin-left:20px;
	color:#fff;
	position:relative;
	top:15px;
	float:left;
}
.z-btn9 {
	width:150px;
	height:50px;
	line-height:50px;
	background:#019067;
	text-align:center;
	margin-left:20px;
	color:#fff;
	position:relative;
	top:15px;
	float:left;
}
.z-btn10 {
	width:150px;
	height:50px;
	line-height:50px;
	background:#019067;
	text-align:center;
	margin-left:20px;
	color:#fff;
	position:relative;
	top:15px;
	float:left;
}
.z-btn {
	position:relative;
	overflow:hidden;
}
.z-btn a {
	position:relative;
	z-index:999;
	transition:0.5s;
}
.z-btn span {
	position:relative;
	z-index:999;
	transition:0.5s;
	display:block;
}
.z-btn img {
	position:relative;
	z-index:999;
	transition:0.5s;
}
.z-btn1:hover {
	color:#555;
}
.z-btn1:before {
	content:"";
	width:0%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:#fff;
	transition:0.5s;
}
.z-btn1:hover:before {
	width:100%;
}
.z-btn2:hover {
	color:#555;
}
.z-btn2:before {
	content:"";
	width:0%;
	height:100%;
	position:absolute;
	top:0;
	right:0;
	background:#fff;
	transition:0.5s;
}
.z-btn2:hover:before {
	width:100%;
}
.z-btn3:hover {
	color:#555;
}
.z-btn3:before {
	content:"";
	width:0%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:#fff;
	transition:0.5s;
}
.z-btn3:hover:before {
	width:50%;
}
.z-btn3:after {
	content:"";
	width:0%;
	height:100%;
	position:absolute;
	top:0;
	right:0;
	background:#fff;
	transition:0.5s;
}
.z-btn3:hover:after {
	width:50%;
}
.z-btn4:hover {
	color:#555;
}
.z-btn4:before {
	content:"";
	width:100%;
	height:0%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background:#fff;
	transition:0.5s;
}
.z-btn4:hover:before {
	height:50%;
}
.z-btn5:hover {
	color:#555;
}
.z-btn5:before {
	content:"";
	width:100%;
	height:0%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background:#fff;
	transition:0.5s;
}
.z-btn5:hover:before {
	height:100%;
}
.z-btn6:hover {
	color:#555;
}
.z-btn6:before {
	content:"";
	width:100%;
	height:0%;
	position:absolute;
	top:0%;
	left:50%;
	transform:translate(-50%,-50%);
	background:#fff;
	transition:0.5s;
}
.z-btn6:hover:before {
	height:100%;
}
.z-btn6:after {
	content:"";
	width:100%;
	height:0%;
	position:absolute;
	top:100%;
	left:50%;
	transform:translate(-50%,-50%);
	background:#fff;
	transition:0.5s;
}
.z-btn6:hover:after {
	height:100%;
}
.z-btn7:hover {
	color:#555;
}
.z-btn7:before {
	content:"";
	width:100%;
	height:0%;
	position:absolute;
	top:0%;
	left:0%;
	background:#fff;
	transition:0.5s;
}
.z-btn7:hover:before {
	height:100%;
}
.z-btn8:hover {
	color:#555;
}
.z-btn8:before {
	content:"";
	width:100%;
	height:0%;
	position:absolute;
	bottom:0%;
	left:0%;
	background:#fff;
	transition:0.5s;
}
.z-btn8:hover:before {
	height:100%;
}

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

简单css3按钮动画的实现

记录下自己学习before和after动画的过程。持续更新

0