About this snippet

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.

Size
2.7 KB
Uses
HTML, CSS
Loads
Nothing external
Views
180

Collections

Related snippets

<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>
*, *::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;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save