html 按钮动画,简单css3按钮动画的实现

* {

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%;

}