.animated-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 7px 36px;
	border: 1px solid;
	border-color: transparent;
	font-size: 16px;
	background-color: #4372D6;
	border-radius: 2px;
	font-weight: 600;
	color: #4372D6;
	box-shadow: 0 0 0 2px #4372D6;
	cursor: pointer;
	overflow: hidden;
	color: #ffffff;
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	width: 100%;
}

.animated-button svg {
	position: absolute;
	width: 24px;
	fill: #ffffff;
	z-index: 9;
	transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
	right: 16px;
}

.animated-button .arr-2 {
	left: -25%;
}

.animated-button .circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	background-color: #507cdb;
	border-radius: 50%;
	opacity: 0;
	transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
	position: relative;
	z-index: 1;
	transform: translateX(-15px);
	transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
	box-shadow: 0 0 0 12px transparent;
	color: #ffffff;
	border-radius: 3px;
}

.animated-button:hover .arr-1 {
	right: -25%;
}

.animated-button:hover .arr-2 {
	left: 16px;
}

.animated-button:hover .text {
	transform: translateX(15px);
}

.animated-button:hover svg {
	fill: #ffffff;
}

.animated-button:active {
	scale: 0.95;
	box-shadow: 0 0 0 4px #507cdb;
}

.animated-button:hover .circle {
	width: 520px;
	height: 520px;
	opacity: 1;
}