ANIMATE BORDERS BUTTON

by firegroove

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>

  <body>


    <button class="myAnimatedBorder">Before/After</button>

  </body>

</html>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

:root {
  --myColor1: orange;
  /* accessible everywhere */
  --myColor2: black;
  /* accessible everywhere */
  --myRadius: 8px;
}

.myAnimatedBorder {
  z-index: 1;
  position: absolute;
  top: 10px;
  left: 25px;
  /* transform: translate(-50%,-50%); */
  width: 100px;
  height: 30px;
  background: linear-gradient( -45deg, var(--myColor2) 0%, var(--myColor2) 25%, var(--myColor1) 25%, var(--myColor1) 50%, var(--myColor2) 50%, var(--myColor2) 75%, var(--myColor1) 75%, var(--myColor1) 100%);
  background-size: 20px 20px;
  /* box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1), 0 0 0 2px #ed1572; */
  border-radius: var(--myRadius);
  animation: animateBorders 1s linear infinite;
  border: hidden;
}

.myAnimatedBorder:after {
  position: absolute;
  content: "";
  z-index: -1;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background-color: #fff !important;
  /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 1), 0 0 0 2px #ed1572; */
  border-radius: var(--myRadius);
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

@keyframes animateBorders {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 20px;
  }
}