Home
Simon Scheffer
Get it on Google Play button dark

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 CSS v3. It is responsive.

Button

Author Simon Scheffer

12.7k

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

Author:
Arya

3 years ago

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

Author:
Simon Scheffer

3 years ago

15k
Download App Buttons
Ready-to-use Apple App Store and Google Play Store download buttons with official branding and styling

Author:
Musawer Shah

3 months ago

464
CTA gradient button

Author:
Anonymous

1 year ago

2.5k
Primary secondary button pair

Author:
Iris Callahan

1 year ago

1.3k
Buy Me a Coffee CTA section

Author:
Sienna

3 years ago

10.1k
Game changer
by salvator

Author:
Baraka Salvator

8 months ago

970
Settings Button

Author:
Arya

3 years ago

10.8k
Elegant Buttons
Useful Tailwind classes for creating several types of basic buttons.

Author:
Nick Girga

9 months ago

864
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. 🚀

Author:
Banshee

1 year ago

1.4k
Componentes para mi empresa
para mi empresa

Author:
BocchiChan

9 months ago

1k
Tailwind Different Button Styles
Fully Responsive Buttons

Author:
AKASH GANDHAR

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components