Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created January 9, 2020 23:00
Show Gist options
  • Save CodeMyUI/ea619edb557a050aff7c2fc041277bcb to your computer and use it in GitHub Desktop.
Save CodeMyUI/ea619edb557a050aff7c2fc041277bcb to your computer and use it in GitHub Desktop.
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.

License.

@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%
@dmitriy-fesenko
Copy link

CONTRIBUTING.md

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