<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%
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.