<div class="heading">
  <h1>Nice animated gradient buttons</h1>
  <p>by <a href="https://devpebe.com">devpebe.com</a></p>
</div>
<div class="row gray">
  <button class="btn button-gradient button-one">
    Click here!
  </button>
  <button class="btn button-gradient button-two">
    Click here!
  </button>
  <button class="btn button-gradient button-three">
    Click here!
  </button>
  <br>
  <button class="btn button-gradient button-four">
    Click here!
  </button>
  <button class="btn button-gradient button-five">
    Click here!
  </button>
  <button class="btn button-gradient button-six">
    Click here!
  </button>
</div>
<div class="row dark">
  <button class="btn button-outline button-one">
    <span>Click here!</span>
  </button>
  <button class="btn button-outline button-two">
    <span>Click here!</span>
  </button>
  <button class="btn button-outline button-three">
    <span>Click here!</span>
  </button>
  <br>
  <button class="btn button-outline button-four">
    <span>Click here!</span>
  </button>
  <button class="btn button-outline button-five">
    <span>Click here!</span>
  </button>
  <button class="btn button-outline button-six">
    <span>Click here!</span>
  </button>
</div>

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,700');
// Page styles
body {background: #fdfdfd;font-family: 'Poppins';color: #333;padding: 0;margin:0;}
.gray {background: #eee;}
.dark {background: #333;}
a {text-decoration: none;color: #108DFF;}
.heading {text-align: center;}
.row {text-align: center;padding: 40px;}
.row button {margin: 20px;}

// Buttons styles start here
.button-one {
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
}

.button-two {
  background: linear-gradient(-45deg, #00F260, #0575E6);
}

.button-three {
  background: linear-gradient(-45deg, #000046, #1CB5E0);
}

.button-four {
  background: linear-gradient(-45deg, #833ab4, #fd1d1d, #fcb045);
}

.button-five {
  background: linear-gradient(-45deg, #DA4453, #89216B);
}

.button-six {
  background: linear-gradient(-45deg, #16BFFD, #CB3066);
}

.btn {
  font-family: 'Poppins';
  font-weight: 400;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  cursor: pointer;
  border-radius: 6px;
  background-size: 400% 400%;
  color: #FFF;
  text-transform: uppercase;
  border: 0;
  padding: 13px 30px;
  font-size: 15px;
  animation: Gradient 10s ease infinite;
  
  &:hover {
    background-size: 150% 150%;
  }
}

.button-outline {
  animation: Gradient 10s ease infinite;
  position: relative;
  
  span {
    position: relative;
    z-index: 2;
  }
  
  &::after {
    content:'';
    position: absolute;
    border-radius: 4px;
    z-index: 0;
    background: #333;
    top: 2px;
    bottom: 2px;
    right: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}