Home
Patricio Garcia
Listen on Spotify/Apple Music Button

Listen on Spotify/Apple Music Button

This tailwind example is contributed by Patricio Garcia, on 22-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Button

Author Patricio Garcia

2.7k

Fork Fullscreen

<div class="mt-8 flex flex-col md:flex-row items-center justify-center">
	<a href="#">
		<button type="button" class="text-white hover:before:bg-redborder-red-500 relative text-sm px-5 py-2.5 text-center inline-flex items-center me-2 mb-2 w-[13rem] md:w-[15rem] overflow-hidden bg-black shadow-2xl transition-all before:absolute before:bottom-0 before:left-0 before:top-0 before:z-0 before:h-full before:w-0 before:bg-white before:transition-all before:duration-500 hover:text-black hover:before:left-0 hover:before:w-full rounded-lg">
			<span class="text-center inline-flex items-center z-10">
				<svg width="40px" height="40px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    
					<title>Spotify-color</title>
					<desc>Created with Sketch.</desc>
					<defs>
					</defs>
					<g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
						<g id="Color-" transform="translate(-200.000000, -460.000000)" fill="#00DA5A">
							<path d="M238.16,481.36 C230.48,476.8 217.64,476.32 210.32,478.6 C209.12,478.96 207.92,478.24 207.56,477.16 C207.2,475.96 207.92,474.76 209,474.4 C217.52,471.88 231.56,472.36 240.44,477.64 C241.52,478.24 241.88,479.68 241.28,480.76 C240.68,481.6 239.24,481.96 238.16,481.36 M237.92,488.08 C237.32,488.92 236.24,489.28 235.4,488.68 C228.92,484.72 219.08,483.52 211.52,485.92 C210.56,486.16 209.48,485.68 209.24,484.72 C209,483.76 209.48,482.68 210.44,482.44 C219.2,479.8 230,481.12 237.44,485.68 C238.16,486.04 238.52,487.24 237.92,488.08 M235.04,494.68 C234.56,495.4 233.72,495.64 233,495.16 C227.36,491.68 220.28,490.96 211.88,492.88 C211.04,493.12 210.32,492.52 210.08,491.8 C209.84,490.96 210.44,490.24 211.16,490 C220.28,487.96 228.2,488.8 234.44,492.64 C235.28,493 235.4,493.96 235.04,494.68 M224,460 C210.8,460 200,470.8 200,484 C200,497.2 210.8,508 224,508 C237.2,508 248,497.2 248,484 C248,470.8 237.32,460 224,460" id="Spotify">
							</path>
						</g>
					</g>
				</svg>
				<p class="ps-4 text-left">
					<span class="text-sm font-light">Escuchala en</span><br><span class="text-lg">Spotify</span>
				</p>
			</span>
		</button>
	</a>
	<a href="#">							
		<button class="text-white hover:before:bg-redborder-red-500 relative text-sm px-5 py-2.5 text-center inline-flex items-center me-2 mb-2 w-[13rem] md:w-[15rem] overflow-hidden bg-black shadow-2xl transition-all before:absolute before:bottom-0 before:left-0 before:top-0 before:z-0 before:h-full before:w-0 before:bg-white before:transition-all before:duration-500 hover:text-black hover:before:left-0 hover:before:w-full rounded-lg">
			<span class="text-center inline-flex items-center z-10">
				<svg width="40px" height="40px" xmlns="http://www.w3.org/2000/svg" aria-label="Apple Music" role="img" viewBox="0 0 512 512">
					<rect width="512" height="512" rx="15%" fill="url(#g)"/><linearGradient id="g" x1=".5" y1=".99" x2=".5" y2=".02"><stop offset="0" stop-color="#FA233B"/><stop offset="1" stop-color="#FB5C74"/></linearGradient><path fill="#ffffff" d="M199 359V199q0-9 10-11l138-28q11-2 12 10v122q0 15-45 20c-57 9-48 105 30 79 30-11 35-40 35-69V88s0-20-17-15l-170 35s-13 2-13 18v203q0 15-45 20c-57 9-48 105 30 79 30-11 35-40 35-69"/>
				</svg>
				<p class="ps-4 text-left">
					<span class="text-sm font-light">Escuchala en</span><br><span class="text-lg">Apple Music</span>
				</p>
			</span>
		</button>
	</a>
</div>

Related Examples

Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

Author:
KULDEEP

8 months ago

945
hero modern
hero modern

Author:
Omer fils ELENGA

1 month ago

127
Image Card
An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

Author:
Nick Girga

9 months ago

823
Amazon shopping buy now button
Amazon shopping buy now button

Author:
OmKar Mehta

1 year ago

2.1k
Neomorphism button

Author:
Akram Khan

1 year ago

2.4k
Material 3 Buttons [Light]
Buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

9 months ago

994
Tab Menu
Tab menu

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

6.6k
App store & Google playstore buttons

Author:
Dika Rahman

1 year ago

2.7k
Google login/signup button
Styled button designed for users to log in or authenticate using their Google account. The button features a Google logo (represented by an SVG image) on the left and the text "Login with Google" on the right.

Author:
Shakti

2 years ago

40.4k
Animated Light/Dark Mode Toggle
👉🏻3D glow effects on knob & track 👉🏻Gradient transitions that look holographic 👉🏻Animated pulse when active 👉🏻Dark background gradient instead of a flat color 👉🏻Emoji swap (☀️ → 🌙)

Author:
UI-Templates

4 months ago

360
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

8 months ago

1.2k
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

3 years ago

11.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components