<div>
  
  <h1>Gradient + Border Radius</h1>
  
  <a class="nested"><span><p>ANOTHER ONE</p></span></a>
  
  <a class="pseudo">AND ANOTHER ONE</a>
  
</div>

$black : #242424;
$gradient : linear-gradient(to right, #00ff00 0%,#00e5ff 100%);

body { 
  background: $black;
  height: 100%; width: 100%;
  margin: 0; padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  color: #FFFFFF;
}

div { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 100%; height: 100vh;
}
  
h1 { 
  margin: 2em;
  text-align: center;
}

a { cursor: pointer;
  transition: ease-in-out,.2s,color;
  &:hover { color: #DDD; }
}

.nested { 
  display: block;
  max-width: 20em;
  padding: 2px;
  overflow: hidden;
  border-radius: 2em;
  background: $gradient;
  
  span { 
    display: inline-block;
    padding: 1em;
    text-align: center;
    background: $black;
    border-radius: 2rem;
    p { padding: 0 2em; margin: 0; }
  }
  
}

.pseudo {
  display: block;
  margin-top: 20px;
  position: relative;
  border-radius: 2em;
  padding: 1em 2em;
  background: $black;
  &:after { 
    position: absolute;
    z-index: -1;
    top: -2px; bottom: -2px;
    right: -2px; left: -2px;
    background: $gradient;
    border-radius: 2em;
    content: '';
  }
}