CSS
语言：
CSSSCSS
确定
body {
background: #1a414a;
}
.button {
color: #1a414a;
border-radius: 2px;
background: #66cc66;
display: inline-block;
text-align: center;
padding: 16px 45px 13px 18px;
line-height: 1.3;
font-weight: bold;
cursor: pointer;
text-decoration: none;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
font-size: 15px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.button:hover {
background: #1bad4b;
}
.button.active {
background: #22d95e;
}
.square {
position: absolute;
top: 16px;
right: 20px;
width: 15px;
height: 15px;
-webkit-transform: translate(0, -3px) rotate(-45deg);
-ms-transform: translate(0, -3px) rotate(-45deg);
transform: translate(0, -3px) rotate(-45deg);
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
.side {
width: 100%;
position: absolute;
height: 4px;
background: #1a414a;
display: block;
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
.side.bottom {
bottom: 0;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.side.right,
.side.left {
width: 4px;
height: 100%;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.side.right {
right: 0;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.side.top {
width: 0;
}
.active .square {
-webkit-transform: translate(0, 3px) rotate(-45deg);
-ms-transform: translate(0, 3px) rotate(-45deg);
transform: translate(0, 3px) rotate(-45deg);
}
.active .side.top {
width: 100%;
}
.active .side.right {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
}
.active .side.bottom {
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1);
}
.active .side.left {
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1, 0);
}
