.art-btn {
	background-color: var(--btn-primary-bg-colour);
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: 0.4s ease;
	border: 1px solid var(--btn-primary-border-colour);
	color: var(--btn-primary-txt-colour);
	z-index: 1;
}

.art-btn::before,
.art-btn::after {
	content: '';
	display: block;
	width: 50px;
	height: 50px;
	transform: translate(-50%, -50%);
	position: absolute;
	border-radius: 50%;
	z-index: -1;
	background-color: var(--btn-primary-bg-colour-hover);
	transition: 1s ease;
}

.art-btn::before {
	top: -1em;
	left: -1em;
}

.art-btn::after {
	left: calc(100% + 1em);
	top: calc(100% + 1em);
}

.art-btn:hover::before,
.art-btn:hover::after {
	height: 410px;
	width: 800px;
}

.art-btn:hover {
	color: white;
}

.art-btn:active {
	filter: brightness(0.8);
}