<body>
  <div class="button-container">
    <a class='button'>WATCH VIDEO</a>
  </div>
</body>
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700');

$body-gradient: linear-gradient(90deg, rgba(12,12,12,1) 0%, rgba(27,27,27,1) 100%);
$gradient: linear-gradient(-90deg, #5ee878, #00c3ff);
$gradient2: linear-gradient(90deg, rgba(0,195,255,0.2) 0%, rgba(94,232,120,0.2) 100%);


body {
  background: $body-gradient;
}

.button-container {
  position: absolute;
  margin: 0 auto;
  width: 100%;
  top: 50%;
  left: 50%;

  .button {
    position: absolute;
    margin: 0 auto;
    padding: .75em 1.75em;
    top: 0;
    left: 0;
    color: transparent;
    font-size: 1.2rem;
    font-family:'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    text-fill-color: transparent;
    border: 1px solid transparent;
    border-image: $gradient;
    border-image-slice: 1;
    background: $gradient;
    -webkit-background-clip: text;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: .3s;

    &:before {
      content: '';
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: $gradient2;
      opacity: 0;
      transition: .3s ease;
    }
    &:hover {
      color: rgba(255,255,255,.95);

      &:before {
        opacity: 1;
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.