Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

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

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

This comment has been minimized.

Copy link

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

CONTRIBUTING.md

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.