<main>
		<h1>Gradient border animation</h1>
		<div class="container">
			<a href="#">Example 1</a>
			<a href="#">Example 2</a>
			<a href="#">Example 3</a>
		</div>
	</main>

@import url('https://fonts.googleapis.com/css?family=Signika+Negative:400,600,700');

body {
  margin: 0;
  background: #2b2f3c;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
  font-family: 'Signika Negative', sans-serif;
  
  h1 {
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    font-size: 3em;
    letter-spacing: 0.05em;
    margin-bottom: 1em;
  }
  
  .container {
    text-align: center;
    
    a {
      display: inline-block;
      margin: 20px;
      color: #fff;
      line-height: 1.4em;
      letter-spacing: 0.15em;
      text-decoration: none;
      text-transform: uppercase;
      font-weight: 600;
      padding: 0.9em 3.5em;
      border: 0.18em solid transparent;
      background: #2b2f3c;
      border-radius: 3.5em;
      position: relative;
      z-index: 1;
      overflow: hidden;
      
      &:before {
        content: "";
        display: block;
        border-radius: 3.5em;
        position: absolute;
        background: inherit;
        top: 0.2em;
        left: 0.2em;
        right: 0.2em;
        bottom: 0.2em;
        z-index: -1;
      }
      
      &:after {
        content: "";
        display: block;
        //border-radius: 3.5em;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -2;
        transform: rotate(0deg);
        animation: gradient 2s ease alternate infinite;
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
      }
      
      &:hover:after {
          -webkit-animation-play-state: running;
          animation-play-state: running;
        }
      
      &:nth-child(1) {
        
        &:after {
          background: rgb(51,203,235);
          background: -moz-linear-gradient(left, rgba(51,203,235,1) 0%, rgba(40,214,98,1) 30%, rgba(240,119,57,1) 70%, rgba(227,54,107,1) 100%);
          background: -webkit-linear-gradient(left, rgba(51,203,235,1) 0%,rgba(40,214,98,1) 30%,rgba(240,119,57,1) 70%,rgba(227,54,107,1) 100%);
          background: linear-gradient(to right, rgba(51,203,235,1) 0%,rgba(40,214,98,1) 30%,rgba(240,119,57,1) 70%,rgba(227,54,107,1) 100%);
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cbeb', endColorstr='#e3366b',GradientType=1 );
          background-size: 300% 300%;
        }

      }
      
      &:nth-child(2) {
        
        &:after {
          background: rgb(96,134,193);
          background: -moz-linear-gradient(45deg,  rgba(96,134,193,1) 0%, rgba(239,224,151,1) 70%, rgba(214,100,102,1) 100%);
          background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(96,134,193,1)), color-stop(70%,rgba(239,224,151,1)), color-stop(100%,rgba(214,100,102,1)));
          background: -webkit-linear-gradient(45deg,  rgba(96,134,193,1) 0%,rgba(239,224,151,1) 70%,rgba(214,100,102,1) 100%);
          background: -o-linear-gradient(45deg,  rgba(96,134,193,1) 0%,rgba(239,224,151,1) 70%,rgba(214,100,102,1) 100%);
          background: -ms-linear-gradient(45deg,  rgba(96,134,193,1) 0%,rgba(239,224,151,1) 70%,rgba(214,100,102,1) 100%);
          background: linear-gradient(45deg,  rgba(96,134,193,1) 0%,rgba(239,224,151,1) 70%,rgba(214,100,102,1) 100%);
          background-size: 300% 300%;
        }
      }
      
      &:nth-child(3) {
        
        &:after {
          background: rgb(230,54,196);
          background: -moz-linear-gradient(left, rgba(230,54,196,1) 0%, rgba(63,206,165,1) 48%, rgba(80,64,139,1) 96%);
          background: -webkit-linear-gradient(left, rgba(230,54,196,1) 0%,rgba(63,206,165,1) 48%,rgba(80,64,139,1) 96%);
          background: linear-gradient(to right, rgba(230,54,196,1) 0%,rgba(63,206,165,1) 48%,rgba(80,64,139,1) 96%);
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e636c4', endColorstr='#50408b',GradientType=1 );
          background-size: 300% 300%;
        }
      }
    }
  }
  
  @-webkit-keyframes gradient {.keyframes;}
  @keyframes gradient {.keyframes;}
  .keyframes () {
          0% {background-position: 0% 50%;}
          50% {background-position: 95% 50%;}
          100% {background-position: 0% 50%;}
  }
}