Skip to content

Instantly share code, notes, and snippets.

Created January 9, 2020 23:00
What would you like to do?
Peach Beach Button
<button>Beach Time 🌴</button>

Peach Beach Button

First take on newest CodePen challenge. Animated button in Sass

A Pen by Ann H. on CodePen.


@import url('')
$green: #a2ccb6
$light-peach: #ffecd9
$peach: #ee786e
$sand: #fceeb5
$white: #fff
background: $light-peach
display: grid
height: 100vh
margin: 0
place-items: center
padding: 1rem
-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
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
background-position: 0% 50%
background-position: 100%
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment