<div class="em-buttons"> 
  <a href="https://devdevout.com/gradients/color-gradients" target="_blank" class="btn btn-small">Small Button</a>
  <a href="https://devdevout.com/gradients/color-gradients" target="_blank" class="btn">Medium Button</a>
  <a href="https://devdevout.com/gradients/color-gradients" target="_blank" class="btn btn-large">Large Button</a>
</div>

body {
  font-family: roboto;
}

/* center div */
.em-buttons{
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center 
}

/* general button code (keep in mind the buttons have a default font-size of 16px) */
.btn {
  display: inline-block;
  background-image: linear-gradient(315deg, #00B4D8, #2666CF);
  color: white;
  font-weight: 600;
  letter-spacing: 4px;
  text-decoration: none;
  
  /* I used rem for the margin because I want equal spacing between the buttons, uncomment em to see the difference */
  margin: 1rem;
/*   margin: .5em; */
  
  /* I used em for the button padding because I want the padding to be proportional and adapt automatically to the button's font-size for better padding consistency depending on the size of each button, uncomment rem to see that the padding is fixed and not proportional to each button's font size which doesn't look great for the small or large button */
  padding: 1.5em 4.5em;
/*   padding: 1rem 3rem; */
}
  
.btn-small {
  font-size: .5rem;
}

.btn-large {
  font-size: 2rem;
}