Crypto Donation Boxes

codepen logo
Thanks to Bennett Feely @bennettfeely
Original source https://codepen.io/bennettfeely/pen/WXWKGW
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;
	}	
}