.animated-button1 {
    background: linear-gradient(-30deg, var(--global--color4), var(--global--color3));
    background-size: 200% 200%;
	padding: 10px 10px;
	margin: 12px;
	display: inline-block;
	-webkit-transform: translate(0%, 0%);
	transform: translate(0%, 0%);
	overflow: hidden;
	color: var(--global--color1);
	font-size: 16px;
	min-width: 100px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	font-family: 'NotoSans-Bold';
	cursor: pointer;
    transition: background-position 0.5s ease, opacity 0.3s ease-in-out, color 0.3s ease-in-out;
    -webkit-transition: background-position 0.5s ease, opacity 0.3s ease-in-out, color 0.3s ease-in-out;
}
.animated-button1:hover {
    background-position: 100% 0%;
	color: var(--global--color2);
}

.animated-button1 span {
	position: absolute;
}

.animated-button1 span:nth-child(1) {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 3px;
	background: -webkit-gradient(linear,
			right top,
			left top,
			from(rgba(43, 8, 8, 0)),
			to(var(--global--color1)));
	background: linear-gradient(to left, rgba(43, 8, 8, 0), var(--global--color1));
	-webkit-animation: 2s animateTop linear infinite;
	animation: 2s animateTop linear infinite;
}

@keyframes animateTop {
	0% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	100% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

.animated-button1 span:nth-child(2) {
	top: 0px;
	right: 0px;
	height: 100%;
	width: 3px;
	background: -webkit-gradient(linear,
			left bottom,
			left top,
			from(rgba(43, 8, 8, 0)),
			to(var(--global--color1)));
	background: linear-gradient(to top, rgba(43, 8, 8, 0), var(--global--color1));
	-webkit-animation: 2s animateRight linear -1s infinite;
	animation: 2s animateRight linear -1s infinite;
}

@keyframes animateRight {
	0% {
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}

	100% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}
}

.animated-button1 span:nth-child(3) {
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 3px;
	background: -webkit-gradient(linear,
			left top,
			right top,
			from(rgba(43, 8, 8, 0)),
			to(var(--global--color1)));
	background: linear-gradient(to right, rgba(43, 8, 8, 0), var(--global--color1));
	-webkit-animation: 2s animateBottom linear infinite;
	animation: 2s animateBottom linear infinite;
}

@keyframes animateBottom {
	0% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	100% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
}

.animated-button1 span:nth-child(4) {
	top: 0px;
	left: 0px;
	height: 100%;
	width: 3px;
	background: -webkit-gradient(linear,
			left top,
			left bottom,
			from(rgba(43, 8, 8, 0)),
			to(var(--global--color1)));
	background: linear-gradient(to bottom, rgba(43, 8, 8, 0), var(--global--color1));
	-webkit-animation: 2s animateLeft linear -1s infinite;
	animation: 2s animateLeft linear -1s infinite;
}

@keyframes animateLeft {
	0% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	100% {
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}
}