:root {
  /*--bg-color: #031321;*/
  --bg-color: #255784;
  --primary-color: #2196f3;
  --secondary-color: #255784;
}

.snake a{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #CB4E07;
  box-shadow: 0 20px 50px rgba(0,0,0,.5); 
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 30px;
  padding: 20px 30px;
  overflow: hidden;
  background: var(--bg-color);
}
.snake a:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.05);
}

.snake a span:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(to right, #fff900, #1799f1);
  animation: animate-top 2s linear infinite;
}
.snake a span:nth-child(2) {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2px;
  background: linear-gradient(to bottom, #fff900, #1799f1);
  animation: animate-right 2s linear infinite;
  animation-delay: 1s;
}
.snake a span:nth-child(3) {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(to left, #fff900, #1799f1);
  animation: animate-bottom 2s linear infinite;
}
.snake a span:nth-child(4) {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2px;
  background: linear-gradient(to top, #fff900, #1799f1);
  animation: animate-left 2s linear infinite;
  animation-delay: 1s;
}

@keyframes animate-top{
  0%{transform: translateX(-100%);}
  100%{transform: translateX(100%);}
}
@keyframes animate-left{
  0%{transform: translateY(100%);}
  100%{transform: translateY(-100%);}
}
@keyframes animate-right{
  0%{transform: translateY(-100%);}
  100%{transform: translateY(100%);}
}
@keyframes animate-bottom{
  0%{transform: translateX(100%);}
  100%{transform: translateX(-100%);}
}