<a href='#' class='btn'>Submit</a>
<a href='#' class='btn btn-red'>Submit</a>
<a href='#' class='btn btn-green'>Submit</a>
<a href='#' class='btn btn-gray'>Submit</a>
<a href='#' class='btn btn-purple'>Submit</a>

.btn {
  --btnColor: #5eb5ff;
  border: 1px solid var(--btnColor);
  color: var(--btnColor);
  background-color: white;
  padding: 10px 25px;
  text-decoration: none;
  font-family: "Output Sans";
  font-weight: 600;
  border-radius: 3px;
  margin: 5px;
  transition: all .3s ease;
  
  &:hover {
    color: white;
    background-color: var(--btnColor);
  }
}

.btn-red {
  --btnColor: #ff6969;
}

.btn-green {
  --btnColor: #7ae07a;
}

.btn-gray {
  --btnColor: #555;
}

.btn-purple {
  --btnColor: #ef34ef;
}



// just styling the rest of the page

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
}