Back to Snippets

Modern App Store Badge Buttons CSS

Drive mobile downloads with modern app store badge buttons. We crafted highly accurate SVG icons for both Apple and Google, so your landing page looks incredibly professional.

120

#css

#app store

#google play

#badges

#buttons

#download

#mobile

#marketing

#svg

/HTML *CSS ()JS Output Live Updates

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.badges-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.store-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #000000;
  color: #ffffff;
  text-decoration: none;
  padding: 8px 24px 8px 16px;
  border-radius: 12px;
  border: 1px solid #1e293b;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  min-width: 180px;
}

.store-badge:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.3);
}

.store-badge svg {
  flex-shrink: 0;
}

.badge-text {
  display: flex;
  flex-direction: column;
}

.sub-text {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #cbd5e1;
  line-height: 1;
  margin-bottom: 2px;
}

.main-text {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.5px;
}

<div class="badges-wrapper">
  
  <a href="#" class="store-badge">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z" /></svg>
    <div class="badge-text">
      <span class="sub-text">Download on the</span>
      <span class="main-text">App Store</span>
    </div>
  </a>

<a href="#" class="store-badge">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z" /></svg>
    <div class="badge-text">
      <span class="sub-text">GET IT ON</span>
      <span class="main-text">Google Play</span>
    </div>
  </a>

</div>

Modern App Store Badge Buttons CSS

Share Code Snippet