Peach Beach Button
First take on newest CodePen challenge. Animated button in Sass
<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% | |
CONTRIBUTING.md