<div class="box">
  <button class="btn waves-effect waves-light">BUTTON</button>
  <button class="btn btngreen waves-effect waves-light">BUTTON</button>
  <button class="btn btngreen2 waves-effect waves-light">BUTTON</button>
  <button class="btn flatgreen waves-effect waves-light">BUTTON</button>
</div>

*{font-family: 'roboto'}

.box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.btn{
  height: 50px;
  width: 200px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  color: white;
  font-size: 17px;
  background: linear-gradient(160deg,#ffeb00,#ffb820,#ff8748,#ff5e69,#dd4582,#a43f8e,#623e8a,#0c3776);
  box-shadow: 0px 2px 3px 1px #0000008c;
  outline: none;
  transition: 300ms;
  margin: 10px 0px;
}

.btn:hover{
  box-shadow: 0px 0px 0px 0px transparent;
}

.btngreen{
  background: linear-gradient(160deg,#00ff86,#43d39a,#4aa7aa,#3d7eb7,#3b61c1,#4e4ec8,#5c37d0,#660bd7);
}

.btngreen2{
  background: linear-gradient(160deg,#2cee71,#00d78c,#00be9f,#00a3a7,#0088a3,#006e94,#00547c,#003b5d);
}

.flatgreen{
  background: #2cee71;
  color: black;
}
.flatgreen:focus,.flatgreen:hover{
  background: #2cee71;
}