Coin Flip Donate Button


  $coin-size: 3.5rem;
$coin-thickness: $coin-size / 11; $bg: #f4f7ff;
$bg-button: #031032;
$font-color: #fff;
$c-l: #fcfaf9;
$c-m: #c2cadf;
$c-d: #8590b3;
$c-side: #737c99;
$shine: #e9f4ff; .tip-button { background: none; border: 0; border-radius: 0.25rem 0.25rem 0 0; cursor: pointer; font-family: 'Quicksand', sans-serif; font-size: 0.75rem; font-weight: 600; height: 2.6rem; margin-bottom: -4rem; outline: 0; position: relative; top: 0; transform-origin: 0% 100%; transition: transform 50ms ease-in-out; width: 9.5rem; -webkit-tap-highlight-color: transparent; &:active { transform: rotate(4deg); } // Button was clicked &.clicked { animation: 150ms ease-in-out 1 shake; pointer-events: none; .tip-button__text { opacity: 0; transition: opacity 100ms linear 200ms; } &::before { // background/bar height: 0.5rem; width: 60%; } .coin { transition: margin-bottom 1s linear 200ms; margin-bottom: 0; } } // Coin almost finished falling &.shrink-landing { &::before { // background/bar transition: width 200ms ease-in; width: 0; } } // Coin finished falling &.coin-landed { &::after { // Thank you message opacity: 1; transform: scale(1); transform-origin: 50% 100%; } // Make the little confetti looking dots on this wrapper .coin-wrapper { background: radial-gradient(circle at 35% 97%, rgba($bg-button, 0.4) 0.04rem, transparent 0.04rem), radial-gradient(circle at 45% 92%, rgba($bg-button, 0.4) 0.04rem, transparent 0.02rem), radial-gradient(circle at 55% 98%, rgba($bg-button, 0.4) 0.04rem, transparent 0.04rem), radial-gradient(circle at 65% 96%, rgba($bg-button, 0.4) 0.06rem, transparent 0.06rem); background-position: center bottom; background-size: 100%; bottom: -1rem; opacity: 0; transform: scale(2) translateY(-10px); } } &__text { color: $font-color; margin-right: 1.8rem; opacity: 1; position: relative; transition: opacity 100ms linear 500ms; z-index: 3; } // Background of button &::before { background: $bg-button; border-radius: 0.25rem; bottom: 0; content: ''; display: block; height: 100%; left: 50%; position: absolute; transform: translateX(-50%); transition: height 250ms ease-in-out 400ms, width 250ms ease-in-out 300ms; width: 100%; z-index: 2; } // Thank you message &::after { bottom: -1rem; color: $bg-button; content: 'Thank you!'; height: 110%; left: 0; opacity: 0; position: absolute; pointer-events: none; text-align: center; transform: scale(0); transform-origin: 50% 20%; transition: transform 200ms cubic-bezier(0,0,.35,1.43); width: 100%; z-index: 1; }
} .coin-wrapper { background: none; bottom: 0; height: 18rem; left: 0; opacity: 1; overflow: hidden; pointer-events: none; position: absolute; transform: none; transform-origin: 50% 100%; transition: opacity 200ms linear 100ms, transform 300ms ease-out; width: 100%;
} .coin { --front-y-multiplier: 0; --back-y-multiplier: 0; --coin-y-multiplier: 0; --coin-x-multiplier: 0; --coin-scale-multiplier: 0; --coin-rotation-multiplier: 0; --shine-opacity-multiplier: 0.4; --shine-bg-multiplier: 50%; bottom: calc(var(--coin-y-multiplier) * 1rem - #{$coin-size}); height: $coin-size; margin-bottom: 3.05rem; position: absolute; right: calc(var(--coin-x-multiplier) * 34% + 16%); transform: translateX(50%) scale(calc(0.4 + var(--coin-scale-multiplier))) rotate(calc(var(--coin-rotation-multiplier) * -1deg)); transition: opacity 100ms linear 200ms; width: $coin-size; z-index: 3; &__front, &__middle, &__back, &::before, &__front::after, &__back::after { border-radius: 50%; box-sizing: border-box; height: 100%; left: 0; position: absolute; width: 100%; z-index: 3; } // Tails &__front { background: radial-gradient(circle at 50% 50%, transparent 50%, rgba($c-side, 0.4) 54%, $c-m 54%), linear-gradient(210deg, $c-d 32%, transparent 32%), linear-gradient(150deg, $c-d 32%, transparent 32%), linear-gradient(to right, $c-d 22%, transparent 22%, transparent 78%, $c-d 78%), linear-gradient(to bottom, $c-l 44%, transparent 44%, transparent 65%, $c-l 65%, $c-l 71%, $c-d 71%), linear-gradient(to right, transparent 28%, $c-l 28%, $c-l 34%, $c-d 34%, $c-d 40%, $c-l 40%, $c-l 47%, $c-d 47%, $c-d 53%, $c-l 53%, $c-l 60%, $c-d 60%, $c-d 66%, $c-l 66%, $c-l 72%, transparent 72%); background-color: $c-d; background-size: 100% 100%; transform: translateY(calc(var(--front-y-multiplier) * #{$coin-thickness} / 2)) scaleY(var(--front-scale-multiplier)); // Shadow on coin face &::after { background: rgba(#000, 0.2); content: ''; opacity: var(--front-y-multiplier); } } &__middle { background: $c-side; transform: translateY(calc(var(--middle-y-multiplier) * #{$coin-thickness} / 2)) scaleY(var(--middle-scale-multiplier)); } // Heads &__back { background: radial-gradient(circle at 50% 50%, transparent 50%, rgba($c-side, 0.4) 54%, $c-m 54%), radial-gradient(circle at 50% 40%, $c-l 23%, transparent 23%), radial-gradient(circle at 50% 100%, $c-l 35%, transparent 35%); background-color: $c-d; background-size: 100% 100%; transform: translateY(calc(var(--back-y-multiplier) * #{$coin-thickness} / 2)) scaleY(var(--back-scale-multiplier)); // Shadow on coin face &::after { background: rgba(#000, 0.2); content: ''; opacity: var(--back-y-multiplier); } } // Light glare on the coin &::before { background: radial-gradient(circle at 25% 65%, transparent 50%, rgba(white, 0.9) 90%), linear-gradient(55deg, transparent calc(var(--shine-bg-multiplier) + 0%), $shine calc(var(--shine-bg-multiplier) + 0%), transparent calc(var(--shine-bg-multiplier) + 50%)); content: ''; opacity: var(--shine-opacity-multiplier); transform: translateY(calc(var(--middle-y-multiplier) * #{$coin-thickness} / -2)) scaleY(var(--middle-scale-multiplier)) rotate(calc(var(--coin-rotation-multiplier) * 1deg)); z-index: 10; } // Sqaure for the 'side' of the coin &::after { background: $c-side; content: ''; height: $coin-thickness; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; z-index: 2; }
} @keyframes shake { 0% { transform: rotate(4deg) } 66% { transform: rotate(-4deg) } 100% { transform: rotate() }
} /********* BODY STYLES *********/
html,
body { height: 100%;
} body { align-items: center; background: $bg; display: flex; justify-content: center; -webkit-font-smoothing: antialiased;
}  

!