border animation

by Евгений

HTML

<button class="btn load">Отправить</button>

<div class="button" style="margin-top: 20px;">
      <svg class="button-svg" width="200" height="40">
          <line class="top" x1="0" y1="0" x2="600" y2="0"/>
          <line class="left" x1="0" y1="40" x2="0" y2="-80"/>
          <line class="bottom" x1="200" y1="40" x2="-400" y2="40"/>
          <line class="right" x1="200" y1="0" x2="200" y2="120"/>
      </svg>
    Отправить
  </div>

CSS

.btn {
    height: 40px;
    width: 200px;
    position: relative;
    background-color: #ddd;
    overflow: hidden;
    border: 0;
}
.load:after {
    content: '';
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    border: 3px solid #666;
    position: absolute;
    left: -197px;
    top: -37px;
    animation:load-animation 3s infinite;
}
@keyframes load-animation {
    0% {left: -197px; top: -37px}
    25% {left: 197px; top: -37px}
    50% {left: 197px; top: 37px}
    75% {left: -197px; top: 37px}
    100% {left: -197px; top: -37px}
}


.button {
	width: 200px;
	height: 40px;
	position: relative;
	background: #ddd;
    text-align: center;
}

.button-svg {
	position: absolute;
	top: 0;
	left: 0;
}

.button-svg line {
	stroke-width: 5;
	stroke: #666;
	fill: none;
	stroke-dasharray: 200;
}
.button-svg line.left,
.button-svg line.right {
	stroke-dasharray: 40;
}

.button .button-svg line.top {
  animation:load-top-animation 1s infinite;
}
.button .button-svg line.bottom {
  animation:load-bottom-animation 1s infinite;
}
.button .button-svg line.left {
  animation:load-left-animation 1s infinite;
}
.button .button-svg line.right {
  animation:load-right-animation 1s infinite;
}
@keyframes load-top-animation {
    0% {-webkit-transform: translateX(0); transform: translateX(0);}
    100% {-webkit-transform: translateX(-400px); transform: translateX(-400px);}
}
@keyframes load-bottom-animation {
    0% {-webkit-transform: translateX(0); transform: translateX(0);}
    100% {-webkit-transform: translateX(400px); transform: translateX(400px);}
}
@keyframes load-left-animation {
    0% {-webkit-transform: translateY(0); transform: translateY(0);}
    100% {-webkit-transform: translateY(80px); transform: translateY(80px);}
}
@keyframes load-right-animation {
    0% {-webkit-transform: translateY(0); transform: translateY(0);}
    100% {-webkit-transform: translateY(-80px); transform: translateY(-80px);}
}