<button>Beach Time 🌴</button>

@import url('https://fonts.googleapis.com/css?family=Raleway:500')

//palette
$green: #a2ccb6
$light-peach: #ffecd9
$peach: #ee786e
$sand: #fceeb5
$white: #fff

body
  background: $light-peach
  display: grid
  height: 100vh
  margin: 0
  place-items: center
  padding: 1rem
    
button
  -webkit-appearance: none  
  background: -webkit-gradient(to right,$green 0%,$sand 50%,$peach 100%)
  background: linear-gradient(to right,$green 0%,$sand 50%,$peach 100%)
  background-size: 500%
  border: none
  border-radius: 5rem
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)
  color: $white
  cursor: pointer
  font: 1.5em Raleway, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  height: 5rem
  letter-spacing: .05em
  outline: none
  -webkit-tap-highlight-color: transparent
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  width: 20rem
    
button:hover
  animation-name: gradient
  -webkit-animation-name: gradient
  animation-duration: 2s
  -webkit-animation-duration: s
  animation-iteration-count: 1
  -webkit-animation-iteration-count: 1
  animation-fill-mode: forwards
  -webkit-animation-fill-mode: forwards
    
@keyframes gradient
  0% 
    background-position: 0% 50%
  100%
    background-position: 100%