<div class="btn btn-default"></div>
<div class="btn btn-default"></div>
<div class="btn btn-circle"></div>
<div class="btn btn-success"></div>
<div class="btn btn-info"></div>
<div class="btn btn-group"></div>

body {
  width: 100vw;
  height: 100vh;
  padding: 2vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 290px;
  height: 90px;
  position: relative;
  border-radius: 50px;
  font-weight: 500;
  border: solid 5px transparent;
  color: #5e3700;
  font-size: 32px;
  margin: 20px;

  &.btn-primary {
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.61);
    box-shadow: inset 0 5px 15px 0 rgba(255, 255, 255, 0.4),
      inset 0 10px 15px 0 rgba(255, 255, 255, 0.6),
      0 2px 12px rgba(0, 0, 0, 0.35);
    background-image: radial-gradient(
        circle at 50% 0%,
        #fff000 50%,
        #ffcd00 100%
      ),
      linear-gradient(101deg, #ffc46d, #fa0055);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  &.btn-outline {
    color: #fff;
    border: 5px solid #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  }

  &.btn-default {
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(to right, #ff7c2d 3%, #ff016e 97%),
      linear-gradient(to bottom, #fff3b6, #e27d2c);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  &.btn-secondary {
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(to right, #ff005d 5%, #0066ff 98%),
      linear-gradient(to bottom, #fff3b6, #e27d2c);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  &.btn-disabled {
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(to right, #D0D0D0 5%, #BBBBBB 98%),
      linear-gradient(to bottom, #fff3b6, #e27d2c);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  &.btn-success {
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(to right, #ffc600 6%, #04e199 94%),
      linear-gradient(to bottom, #fff3b6, #e27d2c);

    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  &.btn-info {
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(to right, #32A8FF 6%, #00CCB4 94%),
      linear-gradient(to bottom, #D696BC, #CD4F5D);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  &.btn-circle {
    min-width: 90px;
    max-width: 90px;
    height: 90px;
    font-size: 24px;
    color: #fff;
    border-radius: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-image: linear-gradient(-151deg, #17FEF6 0%, #8417F9 100%), linear-gradient(to bottom, #fff3b6, #e27d2c);
    background-origin: border-box;
    background-clip: padding-box, border-box;

    & span {
      display: block;
      text-align:center;
    }
  }

  &.btn-group {
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(to right, #17EDFE 6%, #8417F9 94%),
      linear-gradient(to bottom, #fff3b6, #e27d2c);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }
}