Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Cryptocoin Donation Boxes

Cryptocoin Donation Boxes

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.

License.

// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment