幽灵按钮html,css3幽灵按钮

*{

margin: 0;

padding: 0;

}

#d1{

width: 200px;

height: 100px;

background: dodgerblue;

transition: 1s all linear;

text-align: center;

line-height: 100px;

margin: 100px auto;

color: white;

position: relative;

font-size: 32px;

font-weight: bold;

}

#d2{

position: absolute;

left: 0;

top: 0;

width: 0;

height: 10px;

transition: 1s;

}

#d3{

position: absolute;

right: 0;

bottom: 0;

width: 0;

height: 10px;

transition: 1s;

}

#d4{

position: absolute;

left: 0;

bottom: 0;

width: 10px;

height: 0;

transition: 1s 1s;

}

#d5{

position: absolute;

right: 0;

top: 0;

width: 10px;

height: 0;

transition: 1s 1s;

}

#d1:hover{

background: transparent;

color:dodgerblue ;

}

#d1:hover #d2,#d1:hover #d3{

width: 200px;

background:dodgerblue;

}

#d1:hover #d4,#d1:hover #d5{

background:dodgerblue;

height: 100px;

}