Store buttons (apple,google play)

apple, google play store buttons

This tailwind example is contributed by Simon Scheffer, on 12-Dec-2022. Component is made with Tailwind v3.4.

Tailwind v3.4 15.9k 13

<div class="flex justify-center">
    <div>
        <button type="button" class="flex items-center justify-center w-48 mt-3 text-white bg-black h-14 rounded-xl">
            <div class="mr-3">
                <svg viewBox="0 0 384 512" width="30">
                    <path fill="currentColor" d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z">
                    </path>
                </svg>
            </div>
            <div>
                <div class="text-xs">
                    Download on the
                </div>
                <div class="-mt-1 font-sans text-xl font-semibold">
                    App Store
                </div>
            </div>
        </button>
        <button type="button" class="flex items-center justify-center w-48 mt-3 text-black bg-transparent border border-black h-14 rounded-xl">
            <div class="mr-3">
                <svg viewBox="0 0 384 512" width="30">
                    <path fill="currentColor" d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z">
                    </path>
                </svg>
            </div>
            <div>
                <div class="text-xs">
                    Download on the
                </div>
                <div class="-mt-1 font-sans text-2xl font-semibold">
                    App Store
                </div>
            </div>
        </button>
        <button type="button" class="flex items-center justify-center mt-3 text-white bg-black w-60 h-14 rounded-xl">
            <div class="mr-3">
                <svg viewBox="0 0 384 512" width="30">
                    <path fill="currentColor" d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z">
                    </path>
                </svg>
            </div>
            <div>
                <div class="text-xs">
                    Download on the
                </div>
                <div class="-mt-1 font-sans text-2xl font-semibold">
                    Mac App Store
                </div>
            </div>
        </button>
        <button type="button" class="flex items-center justify-center w-48 mt-3 text-white bg-black rounded-lg h-14">
            <div class="mr-3">
                <svg viewBox="30 336.7 120.9 129.2" width="30">
                    <path fill="#FFD400" d="M119.2,421.2c15.3-8.4,27-14.8,28-15.3c3.2-1.7,6.5-6.2,0-9.7  c-2.1-1.1-13.4-7.3-28-15.3l-20.1,20.2L119.2,421.2z">
                    </path>
                    <path fill="#FF3333" d="M99.1,401.1l-64.2,64.7c1.5,0.2,3.2-0.2,5.2-1.3  c4.2-2.3,48.8-26.7,79.1-43.3L99.1,401.1L99.1,401.1z">
                    </path>
                    <path fill="#48FF48" d="M99.1,401.1l20.1-20.2c0,0-74.6-40.7-79.1-43.1  c-1.7-1-3.6-1.3-5.3-1L99.1,401.1z">
                    </path>
                    <path fill="#3BCCFF" d="M99.1,401.1l-64.3-64.3c-2.6,0.6-4.8,2.9-4.8,7.6  c0,7.5,0,107.5,0,113.8c0,4.3,1.7,7.4,4.9,7.7L99.1,401.1z">
                    </path>
                </svg>
            </div>
            <div>
                <div class="text-xs">
                    GET IT ON
                </div>
                <div class="-mt-1 font-sans text-xl font-semibold">
                    Google Play
                </div>
            </div>
        </button>
    </div>
</div>

Related Examples

Playstore Button
Download on the play store button

Arya

4 years ago

15.7k
Download on the App Store dark button

Simon Scheffer

3 years ago

9.4k
Get the app section
Play store and App store buttons

Sophia Baker

3 years ago

10.2k
App Store Button

Arya

4 years ago

10.8k
Get it on Google Play button dark

Simon Scheffer

3 years ago

13k
Download on the App Store light button

Simon Scheffer

3 years ago

13.8k
Settings Button

Arya

4 years ago

11.6k
IMDB score and votes box

Darius G

3 years ago

9.1k
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Coastal UI

2 years ago

2.6k
Gradient Button
These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.

Md. Tofayel islam

2 years ago

5k
Gradient border button

Leon Bachmann

3 years ago

17.2k
Color Changing Gradient Button
Color Changing Gradient Button

EquinoX

2 years ago

4.5k