/* 修改宽高调整盒子大小 */
        
        body {
	background-color:black;
}
.rabut {
	width:200px;
	height:50px;
	color:#69ca62;
	/* 外面围绕的边框是真边框，眼睛看见的边框是阴影效果 */
            box-shadow:inset 0 0 0 1px rgba(105,202,98,0.5);
	background-color:#0f222b;
}
.rabut {
	text-align:center;
	margin:100px auto;
}
.rabut,.rabut::before,.rabut::after {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
.rabut::before,.rabut::after {
	content:'';
	margin:-5%;
	box-shadow:inset 0 0 0 2px;
	animation:clipMe 8s linear infinite;
}
.rabut::before {
	animation-delay:-4s;
}
.rabut:hover::after,.rabut:hover::before {
	background-color:rgba(255,0,0,0.3);
}
/* 核心：更改宽高后这下面的动画效果也需修改 */
        
        @keyframes clipMe {
	0%,100% {
	/* 上 右 下  左*/
                /* 上-下=-2px，右-右=220px 显示盒子上边框 */
                clip:rect(0px,220.0px,2px,0px);
}
25% {
	/* 上-下=-70px，右-右=2px 显示盒子左边框 */
                clip:rect(0px,2px,70.0px,0px);
}
50% {
	/* 上-下=-2px，右-右=220px 显示盒子下边框 */
                clip:rect(68.0px,220.0px,70.0px,0px);
}
75% {
	/* 上-下=-70px，右-右=2px 显示盒子右边框 */
                clip:rect(0px,220.0px,70.0px,218.0px);
}
}.rabut a {
	font-size:20px;
	line-height:50px;
	text-decoration:none;
	color:#404d5b;
}