HTML
<label class="btc donate-crypto-box">
<div class="coin">
<div class="coin-face">
<svg height="10" viewBox="0 0 32 32" width="10" xmlns="http://www.w3.org/2000/svg"><path 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" fill="#FFF"></path></svg>
</div>
<div class="coin-face"></div>
<div class="coin-face"></div>
<div class="coin-face"></div>
<div class="coin-face">
<svg height="10" viewBox="0 0 32 32" width="10" xmlns="http://www.w3.org/2000/svg"><path 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" fill="#FFF"></path></svg>
</div>
</div>
<input class="coin-address" onclick="this.select()" readonly="readonly" spellcheck="false" type="text" value="1DonateWffyhwAjskoEwXt83pHZxhLTr8H" /></label><label class="eth donate-crypto-box">
<div class="coin">
<div class="coin-face">
<svg height="10" viewBox="0 0 32 32" width="10" xmlns="http://www.w3.org/2000/svg"><path 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" fill="#FFF"></path></svg>
</div>
<div class="coin-face"></div>
<div class="coin-face"></div>
<div class="coin-face"></div>
<div class="coin-face">
<svg height="8" viewBox="0 0 32 32" width="8" xmlns="http://www.w3.org/2000/svg"><path 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" fill="#fff"></path></svg>
</div>
</div>
<input class="coin-address" onclick="this.select()" readonly="readonly" spellcheck="false" type="text" value="0xF2371F9318CE5Cb0c88bba7c1Bb297c9491D3704" /></label><label class="ltc donate-crypto-box">
<div class="coin">
<div class="coin-face">
<svg height="8" viewBox="0 0 38 38" width="8" xmlns="http://www.w3.org/2000/svg"><path 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" fill="#fff"></path></svg>
</div>
<div class="coin-face"></div>
<div class="coin-face"></div>
<div class="coin-face"></div>
<div class="coin-face">
<svg height="8" viewBox="0 0 38 38" width="8" xmlns="http://www.w3.org/2000/svg"><path 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" fill="#fff"></path></svg>
</div>
</div>
<input class="coin-address" onclick="this.select()" readonly="readonly" spellcheck="false" type="text" value="LVB3F2B8pyvBUPtevifCxThxpbQmGma2kn" /></label>
CSS
.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;
font-size: 4vmin;
}
@for $i from 1 through 3 {
.donate-crypto-box:nth-child(#{$i}) .coin {
animation-delay: $i*.2s;
}
}
