.uat_text {
    background: none;
    border: 0;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 4px #4643f5;
    color: rgb(214, 24, 24);
    font-size: inherit;
    font-weight: 700;
    margin: 1em;
    padding: 0.2em 1.0em;
    text-align: center;
    text-transform: capitalize;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    border-radius: 6px;
}
.uat_text::before {
    top: 0;
    left: 0;
    border-top-color: #60daaa;
    border-right-color: #60daaa;
    animation: uatBorder 2s infinite;
}
.uat_text::before, .uat_text::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    border: 4px solid transparent;
    width: 0;
    height: 0;
}
.uat_text::after {
    bottom: 0;
    right: 0;
    animation: uatBorder 2s 1s infinite, uatBorderColor 2s 1s infinite;
}
.uat_text::before, .uat_text::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    border: 4px solid transparent;
    width: 0;
    height: 0;
}


@keyframes uatBorder {
	0% {
	  width: 0;
	  height: 0;
	}
	25% {
	  width: 100%;
	  height: 0;
	}
	50% {
	  width: 100%;
	  height: 100%;
	}
	100% {
	  width: 100%;
	  height: 100%;
	}
}
@keyframes uatBorderColor {
	0% {
	  border-bottom-color: #60daaa;
	  border-left-color: #60daaa;
	}
	50% {
	  border-bottom-color: #60daaa;
	  border-left-color: #60daaa;
	}
	51% {
	  border-bottom-color: transparent;
	  border-left-color: transparent;
	}
	100% {
	  border-bottom-color: transparent;
	  border-left-color: transparent;
	}
}