App Download Buttons
A pair of dark store style badges with a device glyph and two-line label. A small arrow drops into each screen on a loop, one after the other. Generic glyphs, so there are no logos to license.
Also known as: app store badge css, download app button css, download badge button.
HTML
<div class="btn-app-download">
<button class="btn-app-download-badge" type="button">
<span class="btn-app-download-glyph" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="6" y="2" width="12" height="20" rx="2.5"/></svg>
<svg class="btn-app-download-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8v7M9 12l3 3 3-3"/></svg>
</span>
<span class="btn-app-download-text"><small>Download for</small>Mobile</span>
</button>
<button class="btn-app-download-badge" type="button">
<span class="btn-app-download-glyph" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="12.5" rx="1.8"/><path d="M8.5 20.5h7M12 16.5v4"/></svg>
<svg class="btn-app-download-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6.5v5.5M9.5 9.5 12 12l2.5-2.5"/></svg>
</span>
<span class="btn-app-download-text"><small>Download for</small>Desktop</span>
</button>
</div>CSS
.btn-app-download {
--c: var(--btn-color, #3b82f6);
font-size: var(--btn-size, 18px);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6em;}
.btn-app-download-badge {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.75em 1.6em;
border: 0;
border-radius: 0.6em;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
gap: 0.6em;
padding: 0.45em 1.1em 0.45em 0.8em;
border: 1px solid color-mix(in srgb, var(--c) 25%, rgba(255, 255, 255, 0.28));
border-radius: 0.6em;
background: color-mix(in srgb, var(--c) 12%, #0a0c11);
color: #fff;
text-align: left;
transition: transform 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease;}
.btn-app-download-glyph {
position: relative;
width: 1.7em;
height: 1.7em;
}
.btn-app-download-glyph svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.btn-app-download-arrow {
color: color-mix(in srgb, var(--c) 70%, #fff);
opacity: 0;
animation: btn-app-download-drop 2.4s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
.btn-app-download-badge + .btn-app-download-badge .btn-app-download-arrow { animation-delay: 0.5s; }
.btn-app-download-text {
display: grid;
font-size: 1.05em;
line-height: 1.1;
}
.btn-app-download-text small {
font-size: 0.64em;
font-weight: 500;
letter-spacing: 0.03em;
opacity: 0.75;
}
.btn-app-download-badge:is(:hover, :focus-visible) {
border-color: var(--c);
box-shadow: 0 0.4em 1em -0.4em color-mix(in srgb, var(--c) 70%, transparent);
}
.btn-app-download-badge:active { transform: scale(0.96); }
@keyframes btn-app-download-drop {
0% { opacity: 0; transform: translateY(-0.35em); }
25% { opacity: 1; }
55% { opacity: 1; transform: translateY(0.05em); }
75%, 100% { opacity: 0; transform: translateY(0.15em); }
}
@media (prefers-reduced-motion: reduce) {
.btn-app-download, .btn-app-download *, .btn-app-download::before, .btn-app-download::after, .btn-app-download *::before, .btn-app-download *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.