Skip to content

Instantly share code, notes, and snippets.



Created Jan 9, 2020
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%

This comment has been minimized.

Copy link

@dmitriy-fesenko dmitriy-fesenko commented Jan 9, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.