JSFiddle - React, Tailwind, and code Playground

by meatHucker

HTML

<a href="#" class="cta">
  <div class="text">This is the label</div>
</a>

<hr>

<a href="#" class="cta grad">
  <div class="text">This is the label</div>
</a>

SCSS

body{background: #fff; text-align: center;}
*{
  display: border-box;
}
.cta {
  border: 2px solid #ccc;
  display: inline-block;
  color: gray;
  border-radius: 30px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  
  .text {
    padding: 0 20px;
    background: #eee;
    border-radius: 30px;
  }
  
  &:hover {
    border-color: black;
    color: black;
  }
  &.grad{
     border-radius: 100%;
    content: '';
		background-image: linear-gradient(to right, #f3157c, #f6d935);
    padding: 10px;
    width: auto;
    height:auto;
    top: -10px;
    left: -10px;
    position:absolute;
    z-index:-1;
    
    border-color: transparent;
    .text{
      background: white;
    }
  }
}