Donation box buttons for donating crypto-currencies on your website.
Feel free to use these on your website. Also feel free to maybe drop a little tip in the addresses listed in this demo! :)
A Pen by Bennett Feely on CodePen.
Donation box buttons for donating crypto-currencies on your website.
Feel free to use these on your website. Also feel free to maybe drop a little tip in the addresses listed in this demo! :)
A Pen by Bennett Feely on CodePen.
// Bitcoin | |
label.btc.donate-crypto-box | |
.coin | |
.coin-face | |
svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 32 32" | |
path fill="#FFF" d="M21.78 15.37c.51-.61.83-1.4.83-2.26 0-2.74-1.6-4.38-4.24-4.38V5.45c0-.12-.1-.22-.22-.22h-1.27c-.11 0-.2.1-.2.21v3.3h-1.7V5.44c0-.12-.1-.22-.22-.22H13.5c-.12 0-.2.1-.21.21v3.3H9.67c-.12 0-.21.09-.21.21v1.31c0 .12.1.22.21.22h.21c.94 0 1.7.79 1.7 1.75v7c0 .92-.68 1.67-1.55 1.75a.21.21 0 0 0-.18.16l-.33 1.32c-.01.06 0 .13.04.19.04.05.1.08.17.08h3.55v3.3c0 .1.1.2.2.2h1.28c.12 0 .21-.1.21-.22v-3.28h1.7v3.3c0 .1.1.2.21.2h1.27c.12 0 .22-.1.22-.22v-3.28h.85c2.65 0 4.24-1.64 4.24-4.37 0-1.28-.68-2.39-1.68-3zm-6.8-4.01h2.54c.94 0 1.7.78 1.7 1.75 0 .96-.76 1.75-1.7 1.75h-2.55v-3.5zm3.39 8.75h-3.4v-3.5h3.4c.93 0 1.7.78 1.7 1.75 0 .96-.77 1.75-1.7 1.75z" | |
.coin-face | |
.coin-face | |
.coin-face | |
.coin-face | |
svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 32 32" | |
path fill="#FFF" d="M21.78 15.37c.51-.61.83-1.4.83-2.26 0-2.74-1.6-4.38-4.24-4.38V5.45c0-.12-.1-.22-.22-.22h-1.27c-.11 0-.2.1-.2.21v3.3h-1.7V5.44c0-.12-.1-.22-.22-.22H13.5c-.12 0-.2.1-.21.21v3.3H9.67c-.12 0-.21.09-.21.21v1.31c0 .12.1.22.21.22h.21c.94 0 1.7.79 1.7 1.75v7c0 .92-.68 1.67-1.55 1.75a.21.21 0 0 0-.18.16l-.33 1.32c-.01.06 0 .13.04.19.04.05.1.08.17.08h3.55v3.3c0 .1.1.2.2.2h1.28c.12 0 .21-.1.21-.22v-3.28h1.7v3.3c0 .1.1.2.21.2h1.27c.12 0 .22-.1.22-.22v-3.28h.85c2.65 0 4.24-1.64 4.24-4.37 0-1.28-.68-2.39-1.68-3zm-6.8-4.01h2.54c.94 0 1.7.78 1.7 1.75 0 .96-.76 1.75-1.7 1.75h-2.55v-3.5zm3.39 8.75h-3.4v-3.5h3.4c.93 0 1.7.78 1.7 1.75 0 .96-.77 1.75-1.7 1.75z" | |
input.coin-address value="1AiVpq67iaUhbe33rZTps1Dci4epsgCkvG" onclick="this.select()" spellcheck="false" readonly="readonly" type="text" | |
// Etherum | |
label.eth.donate-crypto-box | |
.coin | |
.coin-face | |
svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 32 32" | |
path fill="#FFF" d="M10.13 17.76c-.1-.15-.06-.2.09-.12l5.49 3.09c.15.08.4.08.56 0l5.58-3.08c.16-.08.2-.03.1.11L16.2 25.9c-.1.15-.28.15-.38 0l-5.7-8.13zm.04-2.03a.3.3 0 0 1-.13-.42l5.74-9.2c.1-.15.25-.15.34 0l5.77 9.19c.1.14.05.33-.12.41l-5.5 2.78a.73.73 0 0 1-.6 0l-5.5-2.76z" | |
.coin-face | |
.coin-face | |
.coin-face | |
.coin-face | |
svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 32 32" | |
path fill="#fff" d="M10.13 17.76c-.1-.15-.06-.2.09-.12l5.49 3.09c.15.08.4.08.56 0l5.58-3.08c.16-.08.2-.03.1.11L16.2 25.9c-.1.15-.28.15-.38 0l-5.7-8.13zm.04-2.03a.3.3 0 0 1-.13-.42l5.74-9.2c.1-.15.25-.15.34 0l5.77 9.19c.1.14.05.33-.12.41l-5.5 2.78a.73.73 0 0 1-.6 0l-5.5-2.76z" | |
input.coin-address value="0xed6F945c25350AD55781979B477567f18db94632" onclick="this.select()" spellcheck="false" readonly="readonly" type="text" | |
// Litecoin | |
label.ltc.donate-crypto-box | |
.coin | |
.coin-face | |
svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 38 38" | |
path fill="#fff" d="M12.29 28.04l1.29-5.52-1.58.67.63-2.85 1.64-.68L16.52 10h5.23l-1.52 7.14 2.09-.74-.58 2.7-2.05.8-.9 4.34h8.1l-.99 3.8z" | |
.coin-face | |
.coin-face | |
.coin-face | |
.coin-face | |
svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 38 38" | |
path fill="#fff" d="M12.29 28.04l1.29-5.52-1.58.67.63-2.85 1.64-.68L16.52 10h5.23l-1.52 7.14 2.09-.74-.58 2.7-2.05.8-.9 4.34h8.1l-.99 3.8z" | |
input.coin-address value="Le9YNyVezEqBDWQZ7CrXJXoBdjt5FMNFbv" onclick="this.select()" spellcheck="false" readonly="readonly" type="text" |
.donate-crypto-box { | |
display: flex; | |
align-items: center; | |
width: 100%; | |
padding: 1em; | |
box-sizing: border-box; | |
user-select: none; | |
cursor: text; | |
} | |
.coin { | |
display: inline-block; | |
position: relative; | |
min-width: 3em; | |
min-height: 3em; | |
animation: spin 3s cubic-bezier(.3,2,.4,.8) infinite both; | |
transform-style: preserve-3d; | |
vertical-align: middle; | |
@keyframes spin { | |
0%, 10% { | |
transform: rotate(-10deg) perspective(400px); | |
} | |
90%, 100% { | |
transform: rotate(-10deg) perspective(400px) rotateY(180deg); | |
} | |
} | |
} | |
.coin-face { | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
border-radius: 50%; | |
&:nth-child(1) { transform: translateZ(-.2em) rotateY(-180deg); } | |
&:nth-child(2) { transform: translateZ(-.1em); } | |
&:nth-child(4) { transform: translateZ(.1em); } | |
&:nth-child(5) { transform: translateZ(.2em); } | |
svg { | |
width: 100%; | |
height: 100%; | |
} | |
} | |
.coin-address { | |
flex: 1; | |
font: .7em/2.5 Monaco, monospace; | |
text-align: center; | |
margin-left: 1em; | |
border-width: 0 0 2px; | |
border-color: rgba(black, .1); | |
transition: border-color .3s; | |
cursor: text; | |
&:hover { transition-duration: .1s; } | |
} | |
@mixin crypto($color, $max-width) { | |
max-width: $max-width; | |
.coin-face { | |
background: shade($color, 35%); | |
&:nth-child(1), | |
&:nth-child(5) { | |
background: $color; | |
} | |
} | |
.coin-address { | |
&:hover, &:focus { border-color: $color; } | |
} | |
} | |
// @include crypto($color, $max-width) | |
.btc { @include crypto(#ff9900, 21em); } | |
.eth { @include crypto(#6F7CBA, 23em); } | |
.ltc { @include crypto(#b5b5b5, 21em); } | |
// Demo styles | |
body { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
height: 100vh; | |
} | |
@for $i from 1 through 3 { | |
.donate-crypto-box:nth-child(#{$i}) .coin { | |
animation-delay: $i*.2s; | |
} | |
} |