Get it on Google Play button dark

Forked from @simon-scheffer/store-buttons-applegoogle-play

This tailwind example is contributed by Simon Scheffer, on 14-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Button

Author Simon Scheffer

Tailwind v3.4 13k 15

Fork Fullscreen

<button type="button" class="flex items-center justify-center w-48 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>

Related Examples

Playstore Button
Download on the play store button

Arya

4 years ago

15.7k
Store buttons (apple,google play)
apple, google play store buttons

Simon Scheffer

3 years ago

15.9k
Continue with Discord button
Login with the Discord button for social login

Anonymous

3 years ago

13.8k
Simple Btn animation

Ranit Saha

1 year ago

2.3k
Gradient shadow button

Manon Daniel

3 years ago

18.2k
Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀

Banshee

1 year ago

2k
Old style Button Designs

Amit Pachange

3 years ago

11k
Underline Hover Effect
Hover effect using after and before pseudo elements.

Carlos Adrian Garcia

2 years ago

10.2k
Neon Morphism button

Akram Khan

2 years ago

2.6k
Botton hover
On hover Changes text

davilaarroyo07

2 years ago

7.6k
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k
Button with loading

Prem..

4 years ago

20.2k