* {
	/* 初始化 取消页面元素的内外边距 */
	margin: 0;
	padding: 0;
}

p {
	margin: 0;
}

.body-container {
	text-align: center;
}

.flex-class {
	display: flex;

}

.flex-item {
	flex: 1
}


.button-line span {
	/* 相对定位 */
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #1a80d7;
	text-decoration: none;
	/* 这里加个动画过渡 */
	transition: all 0.3s ease-in-out;

	filter: hue-rotate(calc(var(--i)*60deg));
}

.button-line span::before,
.button-line span::after {
	/* 将两个伪元素的相同样式写在一起 */
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border: 2px solid #1a80d7;
	/* 这里也加一个动画过渡 */
	/* 最后的0.3s是延迟时间 */
	transition: all 0.3s ease-in-out 0.3s;
}

.button-line span::before {
	top: 0;
	left: 0;
	/* 删除左边元素的右、下边框 */
	border-right: 0;
	border-bottom: 0;
}

.button-line span::after {
	right: 0;
	bottom: 0;
	/* 删除右边元素的左、上边框 */
	border-top: 0;
	border-left: 0;
}

.button-line span:hover {
	color: #fff;
	/* 添加发光效果和倒影 */
	box-shadow: 0 0 10px #1a80d7;
	/* below是下倒影 1px是倒影和元素相隔的距离 最后是个渐变颜色 */

	/* 这里我们为以上属性设置一下延迟时间 */
	transition-delay: 0.4s;
}

.button-line span:hover::before,
.button-line span:hover::after {
	width: 138px;
	height: 58px;
	/* 这里不需要延迟 */
	transition-delay: 0s;
}