Use our buttons based on Tailwind CSS React for actions in forms, dialogues, and more with support for multiple sizes, states, and more.
Buttons are an essential element of web design. Basically, buttons are styled links that grab the user's attention. They help users navigate our websites or apps and drive them to a particular action like submitting a contact form, or placing an order as easily as possible.
See below our button components examples.
Use the following examples to implement a simple default button element for your Tailwind CSS React project.
<button className="rounded-xl bg-brand-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:text-white dark:hover:bg-brand-300 dark:active:bg-brand-200">
Default
</button>
<button className="rounded-xl bg-gray-100 px-5 py-3 text-base font-medium text-navy-700 transition duration-200 hover:bg-gray-200 active:bg-gray-300 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/30">
Secondary
</button>
<button className="rounded-xl bg-navy-700 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-navy-800 active:bg-navy-900 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/30">
Dark
</button>
<button className="rounded-xl bg-blue-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-400 dark:text-white dark:hover:bg-blue-300 dark:active:bg-blue-200">
Blue
</button>
<button className="rounded-xl bg-red-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-red-600 active:bg-red-700 dark:bg-red-400 dark:text-white dark:hover:bg-red-300 dark:active:bg-red-200">
Red
</button>
<button className="rounded-xl bg-green-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-green-600 active:bg-green-700 dark:bg-green-400 dark:text-white dark:hover:bg-green-300 dark:active:bg-green-200">
Green
</button>
<button className="rounded-xl bg-purple-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-purple-600 active:bg-purple-700 dark:bg-purple-400 dark:text-white dark:hover:bg-purple-300 dark:active:bg-purple-200">
Purple
</button>
<button className="rounded-xl bg-yellow-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-yellow-600 active:bg-yellow-700 dark:bg-yellow-400 dark:text-white dark:hover:bg-yellow-300 dark:active:bg-yellow-200">
Yellow
</button>
<button className="rounded-xl bg-orange-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-orange-600 active:bg-orange-700 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300 dark:active:bg-orange-200">
Orange
</button>Use the following examples to implement a fully rounded button in your Tailwind CSS React project.
<button className="rounded-full bg-brand-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:text-white dark:hover:bg-brand-300 dark:active:bg-brand-200">
Default
</button>
<button className="rounded-full bg-gray-100 px-5 py-3 text-base font-medium text-navy-700 transition duration-200 hover:bg-gray-200 active:bg-gray-300 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/30">
Secondary
</button>
<button className="rounded-full bg-navy-700 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-navy-800 active:bg-navy-900 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/30">
Dark
</button>
<button className="rounded-full bg-blue-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-400 dark:text-white dark:hover:bg-blue-300 dark:active:bg-blue-200">
Blue
</button>
<button className="rounded-full bg-red-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-red-600 active:bg-red-700 dark:bg-red-400 dark:text-white dark:hover:bg-red-300 dark:active:bg-red-200">
Red
</button>
<button className="rounded-full bg-green-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-green-600 active:bg-green-700 dark:bg-green-400 dark:text-white dark:hover:bg-green-300 dark:active:bg-green-200">
Green
</button>
<button className="rounded-full bg-purple-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-purple-600 active:bg-purple-700 dark:bg-purple-400 dark:text-white dark:hover:bg-purple-300 dark:active:bg-purple-200">
Purple
</button>
<button className="rounded-full bg-yellow-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-yellow-600 active:bg-yellow-700 dark:bg-yellow-400 dark:text-white dark:hover:bg-yellow-300 dark:active:bg-yellow-200">
Yellow
</button>
<button className="rounded-full bg-orange-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-orange-600 active:bg-orange-700 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300 dark:active:bg-orange-200">
Orange
</button>Use the following examples to implement a fully styled gradient button in your Tailwind CSS React project.
<button className="rounded-xl bg-gradient-to-br from-brandLinear to-blueSecondary px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-blueSecondary/50">
Button 1
</button>
<button className="rounded-xl bg-gradient-to-br from-[#4481EB] to-[#04BEFE] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#4481EB]/50">
Button 2
</button>
<button className="rounded-xl bg-gradient-to-br from-[#00DBDE] to-[#FC00FF] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#FC00FF]/50">
Button 3
</button>
<button className="rounded-xl bg-gradient-to-br from-[#0083FE] to-[#00FFF0] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#0083FE]/50">
Button 4
</button>
<button className="rounded-xl bg-gradient-to-br from-[#0ED2F7] to-[#B2FEFA] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#0ED2F7]/50">
Button 5
</button>
<button className="rounded-xl bg-gradient-to-br from-[#00C9FF] to-[#92FE9D] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#00C9FF]/50">
Button 6
</button>
<button className="rounded-xl bg-gradient-to-br from-[#FDFC47] to-[#24FE41] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#FDFC47]/50">
Button 7
</button>
<button className="rounded-xl bg-gradient-to-br from-[#6AFE24] to-[#FEDB24] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#6AFE24]/50">
Button 8
</button>
<button className="rounded-xl bg-gradient-to-br from-[#FFC837] to-[#FF6108] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#FFC837]/50">
Button 9
</button>
<button className="rounded-xl bg-gradient-to-br from-[#FF9966] to-[#FF5E62] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#FF9966]/50">
Button 10
</button>
<button className="rounded-xl bg-gradient-to-br from-[#FF416C] to-[#FF4B2B] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#FF416C]/50">
Button 11
</button>
<button className="rounded-xl bg-gradient-to-br from-[#F64F59] via-[#C471ED] to-[#12C2E9] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#C471ED]/50">
Button 12
</button>
<button className="rounded-xl bg-gradient-to-br from-[#F857A6] to-[#FF5858] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#F857A6]/50">
Button 13
</button>
<button className="rounded-xl bg-gradient-to-br from-[#EC008C] to-[#FC6767] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#EC008C]/50">
Button 14
</button>
<button className="rounded-xl bg-gradient-to-br from-[#833AB4] via-[#FD1D1D] to-[#FCB045] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#FD1D1D]/50">
Button 15
</button>
<button className="rounded-xl bg-gradient-to-br from-[#6025F5] to-[#FF5555] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#6025F5]/50">
Button 16
</button>
<button className="rounded-xl bg-gradient-to-br from-[#7F00FF] to-[#E100FF] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#7F00FF]/50">
Button 17
</button>
<button className="rounded-xl bg-gradient-to-br from-[#29E9F5] via-[#7A64FF] to-[#FF508B] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#7A64FF]/50">
Button 18
</button>
<button className="rounded-xl bg-gradient-to-br from-[#FC00FF] via-[#504CF3] to-[#02FFD1] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#504CF3]/50">
Button 19
</button>
<button className="rounded-xl bg-gradient-to-br from-[#3C0066] via-[#EC38BC] to-[#FDEFF9] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#EC38BC]/50">
Button 20
</button>
<button className="rounded-xl bg-gradient-to-br from-[#EA52F8] to-[#0066FF] px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-[#0066FF]/25">
Button 21
</button>Use the following examples to implement an outlined button in your Tailwind CSS React project.
<button className="rounded-xl border-2 border-brand-500 px-5 py-3 text-base font-medium text-brand-500 transition duration-200 hover:bg-brand-600/5 active:bg-brand-700/5 dark:border-brand-400 dark:bg-brand-400/10 dark:text-white dark:hover:bg-brand-300/10 dark:active:bg-brand-200/10">
Default
</button>
<button className="rounded-xl border-2 border-gray-300 px-5 py-3 text-base font-medium text-navy-700 transition duration-200 hover:bg-gray-200/10 active:bg-gray-300/10 dark:border-white/20 dark:bg-white/5 dark:text-white dark:hover:bg-white/10 dark:active:bg-white/20">
Secondary
</button>
<button className="rounded-xl border-2 border-navy-700 px-5 py-3 text-base font-medium text-navy-700 transition duration-200 hover:bg-navy-800/5 active:bg-navy-900/5 dark:border-white/20 dark:bg-white/5 dark:text-white dark:hover:bg-white/10 dark:active:bg-white/20">
Dark
</button>
<button className="rounded-xl border-2 border-blue-500 px-5 py-3 text-base font-medium text-blue-500 transition duration-200 hover:bg-blue-600/5 active:bg-blue-700/5 dark:border-blue-400 dark:bg-blue-400/10 dark:text-white dark:hover:bg-blue-300/10 dark:active:bg-blue-200/10">
Blue
</button>
<button className="rounded-xl border-2 border-red-500 px-5 py-3 text-base font-medium text-red-500 transition duration-200 hover:bg-red-600/5 active:bg-red-700/5 dark:border-red-400 dark:bg-red-400/10 dark:text-white dark:hover:bg-red-300/10 dark:active:bg-red-200/10">
Red
</button>
<button className="rounded-xl border-2 border-green-500 px-5 py-3 text-base font-medium text-green-500 transition duration-200 hover:bg-green-600/5 active:bg-green-700/5 dark:border-green-400 dark:bg-green-400/10 dark:text-white dark:hover:bg-green-300/10 dark:active:bg-green-200/10">
Green
</button>
<button className="rounded-xl border-2 border-purple-500 px-5 py-3 text-base font-medium text-purple-500 transition duration-200 hover:bg-purple-600/5 active:bg-purple-700/5 dark:border-purple-400 dark:bg-purple-400/10 dark:text-white dark:hover:bg-purple-300/10 dark:active:bg-purple-200/10">
Purple
</button>
<button className="rounded-xl border-2 border-yellow-500 px-5 py-3 text-base font-medium text-yellow-500 transition duration-200 hover:bg-yellow-600/5 active:bg-yellow-700/5 dark:border-yellow-400 dark:bg-yellow-400/10 dark:text-white dark:hover:bg-yellow-300/10 dark:active:bg-yellow-200/10">
Yellow
</button>
<button className="rounded-xl border-2 border-orange-500 px-5 py-3 text-base font-medium text-orange-500 transition duration-200 hover:bg-orange-600/5 active:bg-orange-700/5 dark:border-orange-400 dark:bg-orange-400/10 dark:text-white dark:hover:bg-orange-300/10 dark:active:bg-orange-200/10">
Orange
</button>Use the following examples to create buttons in different sizes for your TailwindCSS project.
<button className="rounded-lg bg-brand-500 p-2 text-xs font-medium text-white transition duration-200 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:text-white dark:hover:bg-brand-300 dark:active:bg-brand-200">
Extra Small
</button>
<button className="rounded-lg bg-brand-500 px-3 py-2.5 text-sm font-medium text-white transition duration-200 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:text-white dark:hover:bg-brand-300 dark:active:bg-brand-200">
Small Button
</button>
<button className="rounded-xl bg-brand-500 px-4 py-3 text-base font-medium text-white transition duration-200 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:text-white dark:hover:bg-brand-300 dark:active:bg-brand-200">
Medium
</button>
<button className="rounded-xl bg-brand-500 px-5 py-4 text-lg font-medium text-white transition duration-200 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:text-white dark:hover:bg-brand-300 dark:active:bg-brand-200">
Large
</button>
<button className="rounded-xl bg-brand-500 px-10 py-8 text-xl font-medium text-white transition duration-200 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:text-white dark:hover:bg-brand-300 dark:active:bg-brand-200">
Extra Large
</button>Use the following examples to add a SVG icon inside your TailwindCSS button.
<button className="flex flex-row items-center rounded-xl bg-brand-500 px-4 py-3 text-base font-medium text-white transition duration-200 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:text-white dark:hover:bg-brand-300 dark:active:bg-brand-200">
Default <MdChevronRight className="text-lg" />
</button>
<button className="flex flex-row items-center rounded-xl bg-gray-100 px-4 py-3 text-base font-medium text-navy-700 transition duration-200 hover:bg-gray-200 active:bg-gray-300 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/30">
Secondary <MdChevronRight className="text-lg" />
</button>
<button className="flex flex-row items-center rounded-xl bg-navy-700 px-4 py-3 text-base font-medium text-white transition duration-200 hover:bg-navy-800 active:bg-navy-900 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/30">
Dark <MdChevronRight className="text-lg" />
</button>
<button className="flex flex-row items-center rounded-xl bg-blue-500 px-4 py-3 text-base font-medium text-white transition duration-200 hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-400 dark:text-white dark:hover:bg-blue-300 dark:active:bg-blue-200">
Blue <MdChevronRight className="text-lg" />
</button>
<button className="flex flex-row items-center rounded-xl bg-red-500 px-4 py-3 text-base font-medium text-white transition duration-200 hover:bg-red-600 active:bg-red-700 dark:bg-red-400 dark:text-white dark:hover:bg-red-300 dark:active:bg-red-200">
Red <MdChevronRight className="text-lg" />
</button>
<button className="flex flex-row items-center rounded-xl bg-green-500 px-4 py-3 text-base font-medium text-white transition duration-200 hover:bg-green-600 active:bg-green-700 dark:bg-green-400 dark:text-white dark:hover:bg-green-300 dark:active:bg-green-200">
Green <MdChevronRight className="text-lg" />
</button>
<button className="flex flex-row items-center rounded-xl bg-purple-500 px-4 py-3 text-base font-medium text-white transition duration-200 hover:bg-purple-600 active:bg-purple-700 dark:bg-purple-400 dark:text-white dark:hover:bg-purple-300 dark:active:bg-purple-200">
Purple <MdChevronRight className="text-lg" />
</button>
<button className="flex flex-row items-center rounded-xl bg-yellow-500 px-4 py-3 text-base font-medium text-white transition duration-200 hover:bg-yellow-600 active:bg-yellow-700 dark:bg-yellow-400 dark:text-white dark:hover:bg-yellow-300 dark:active:bg-yellow-200">
Yellow <MdChevronRight className="text-lg" />
</button>
<button className="flex flex-row items-center rounded-xl bg-orange-500 px-4 py-3 text-base font-medium text-white transition duration-200 hover:bg-orange-600 active:bg-orange-700 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300 dark:active:bg-orange-200">
Orange <MdChevronRight className="text-lg" />
</button>Use the following examples to implement payment and miscellaneous checkout buttons in your CSS Tailwind project, such as Paypal, Credit Card, Bitcoin, Ethereum, Apple Pay, Google Pay, and so on.
<button
className="linear flex flex-row items-center rounded-xl bg-amber-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-amber-600 active:bg-amber-700"
data-ripple-light
>
<svg
className="mr-2 fill-white"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
height="16"
width="16"
>
<path d="M7.914 10.677h1.659c3.604 0 5.649-1.623 6.3-4.96.021-.11.04-.216.056-.322.036-.226.054-.429.062-.624.006-.134.01-.213.009-.287a2.643 2.643 0 0 0-.216-1.039c-.129-.296-.324-.587-.613-.918C14.318 1.557 12.832 1 11.057 1H5.404a.81.81 0 0 0-.799.683l-1.02 6.571-1.269 8.185a.486.486 0 0 0 .48.561h2.772l.849-5.043a1.51 1.51 0 0 1 1.497-1.28zm9.103-4.587c-.792 3.771-3.357 5.772-7.445 5.772H7.914a.331.331 0 0 0-.328.282L6.481 19h2.907a.707.707 0 0 0 .699-.597l.029-.15.555-3.514.036-.194a.707.707 0 0 1 .699-.597h.44c2.85 0 5.081-1.158 5.733-4.506.268-1.38.132-2.534-.562-3.352z" />
</svg>
Pay safely with PayPal
</button>
<button
className="linear flex flex-row items-center rounded-xl bg-navy-700 px-4 py-3 text-base font-medium text-white transition duration-200 hover:bg-navy-800 active:bg-navy-900 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/30"
data-ripple-light
>
<svg
className="mr-2 fill-white"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
height="16"
width="16"
>
<path d="M18.5 5.146V14.854Q18.5 15.688 17.927 16.26Q17.354 16.833 16.521 16.833H3.479Q2.646 16.833 2.073 16.26Q1.5 15.688 1.5 14.854V5.146Q1.5 4.312 2.073 3.74Q2.646 3.167 3.479 3.167H16.521Q17.354 3.167 17.927 3.74Q18.5 4.312 18.5 5.146ZM3.479 6.625H16.521V5.146Q16.521 5.146 16.521 5.146Q16.521 5.146 16.521 5.146H3.479Q3.479 5.146 3.479 5.146Q3.479 5.146 3.479 5.146ZM3.479 10.062V14.854Q3.479 14.854 3.479 14.854Q3.479 14.854 3.479 14.854H16.521Q16.521 14.854 16.521 14.854Q16.521 14.854 16.521 14.854V10.062ZM3.479 14.854Q3.479 14.854 3.479 14.854Q3.479 14.854 3.479 14.854V5.146Q3.479 5.146 3.479 5.146Q3.479 5.146 3.479 5.146Q3.479 5.146 3.479 5.146Q3.479 5.146 3.479 5.146V14.854Q3.479 14.854 3.479 14.854Q3.479 14.854 3.479 14.854Z" />
</svg>
Debit or Credit Card
</button>
<button
className="linear flex flex-row items-center rounded-xl bg-orange-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-orange-600 active:bg-orange-700"
data-ripple-light
>
<svg
className="mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 64 64"
height="16"
width="16"
>
<path
d="M63.04 39.741c-4.274 17.143-21.638 27.575-38.783 23.301C7.12 58.768-3.313 41.404.962 24.262 5.234 7.117 22.597-3.317 39.737.957c17.144 4.274 27.576 21.64 23.302 38.784z"
className="fill-white"
/>
<path
d="M46.11 27.441c.636-4.258-2.606-6.547-7.039-8.074l1.438-5.768-3.512-.875-1.4 5.616c-.922-.23-1.87-.447-2.812-.662l1.41-5.653-3.509-.875-1.439 5.766c-.764-.174-1.514-.346-2.242-.527l.004-.018-4.842-1.209-.934 3.75s2.605.597 2.55.634c1.422.355 1.68 1.296 1.636 2.042l-1.638 6.571c.098.025.225.061.365.117l-.37-.092-2.297 9.205c-.174.432-.615 1.08-1.609.834.035.051-2.552-.637-2.552-.637l-1.743 4.02 4.57 1.139c.85.213 1.683.436 2.502.646l-1.453 5.835 3.507.875 1.44-5.772c.957.26 1.887.5 2.797.726L27.504 50.8l3.511.875 1.453-5.823c5.987 1.133 10.49.676 12.383-4.738 1.527-4.36-.075-6.875-3.225-8.516 2.294-.531 4.022-2.04 4.483-5.157zM38.087 38.69c-1.086 4.36-8.426 2.004-10.807 1.412l1.928-7.729c2.38.594 10.011 1.77 8.88 6.317zm1.085-11.312c-.99 3.966-7.1 1.951-9.083 1.457l1.748-7.01c1.983.494 8.367 1.416 7.335 5.553z"
className="fill-orange-500"
/>
</svg>
Pay with Bitcoin
</button>
<button
className="linear flex flex-row items-center rounded-xl bg-gray-100 px-4 py-3 text-base font-medium text-navy-700 transition duration-200 hover:bg-gray-200 active:bg-gray-300 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/30"
data-ripple-light
>
Buy with
<svg
className="mx-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
width="16"
height="16"
>
<defs>
<path
id="a"
d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"
/>
</defs>
<clipPath id="b">
<use xlink:href="#a" overflow="visible" />
</clipPath>
<path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z" />
<path
clip-path="url(#b)"
fill="#EA4335"
d="M0 11l17 13 7-6.1L48 14V0H0z"
/>
<path
clip-path="url(#b)"
fill="#34A853"
d="M0 37l30-23 7.9 1L48 0v48H0z"
/>
<path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z" />
</svg>
Pay
</button>
<button
className="linear flex flex-row items-center rounded-xl bg-[#000] px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-[#000]/90 active:bg-[#000]/80"
data-ripple-light
>
<svg
className="mr-2 -mt-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 22.773 22.773"
height="16"
width="16"
>
<path
d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573
c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z"
fill="#fff"
/>
<path
d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334
c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0
c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019
c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464
c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648
c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z"
fill="#fff"
/>
</svg>
Checkout with Apple Pay
</button>
<button
className="linear flex flex-row items-center rounded-xl bg-gradient-to-br from-brandLinear to-blueSecondary px-5 py-3 text-base font-medium text-white transition duration-200 hover:shadow-lg hover:shadow-brand-500/50"
data-ripple-light
>
<svg
className="mr-2 fill-white"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
height="16"
width="16"
>
<path d="M5.146 18.458Q4.312 18.458 3.74 17.875Q3.167 17.292 3.167 16.458V6.833Q3.167 6.021 3.74 5.438Q4.312 4.854 5.146 4.854H6.5Q6.542 3.417 7.552 2.427Q8.562 1.438 10 1.438Q11.438 1.438 12.448 2.427Q13.458 3.417 13.5 4.854H14.854Q15.688 4.854 16.26 5.438Q16.833 6.021 16.833 6.833V16.458Q16.833 17.292 16.26 17.875Q15.688 18.458 14.854 18.458ZM8.5 4.854H11.5Q11.479 4.25 11.042 3.833Q10.604 3.417 10 3.417Q9.396 3.417 8.958 3.833Q8.521 4.25 8.5 4.854ZM5.146 16.458H14.854Q14.854 16.458 14.854 16.458Q14.854 16.458 14.854 16.458V6.833Q14.854 6.833 14.854 6.833Q14.854 6.833 14.854 6.833H13.5V8.354Q13.5 8.75 13.198 9.042Q12.896 9.333 12.5 9.333Q12.104 9.333 11.802 9.042Q11.5 8.75 11.5 8.354V6.833H8.5V8.354Q8.5 8.75 8.198 9.042Q7.896 9.333 7.5 9.333Q7.104 9.333 6.802 9.042Q6.5 8.75 6.5 8.354V6.833H5.146Q5.146 6.833 5.146 6.833Q5.146 6.833 5.146 6.833V16.458Q5.146 16.458 5.146 16.458Q5.146 16.458 5.146 16.458ZM5.146 16.458Q5.146 16.458 5.146 16.458Q5.146 16.458 5.146 16.458V6.833Q5.146 6.833 5.146 6.833Q5.146 6.833 5.146 6.833Q5.146 6.833 5.146 6.833Q5.146 6.833 5.146 6.833V16.458Q5.146 16.458 5.146 16.458Q5.146 16.458 5.146 16.458Z" />
</svg>
Add to cart
</button>
<button
className="linear flex flex-row items-center rounded-xl bg-green-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-green-600 active:bg-green-700 dark:bg-green-400 dark:text-white dark:hover:bg-green-300 dark:active:bg-green-200"
data-ripple-light
>
<svg
className="mr-2 fill-white"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
height="16"
width="16"
>
<path d="M7.979 14.771Q7.792 14.771 7.615 14.698Q7.438 14.625 7.271 14.458L3.75 10.938Q3.458 10.646 3.469 10.219Q3.479 9.792 3.771 9.5Q4.062 9.208 4.49 9.208Q4.917 9.208 5.188 9.5L8.021 12.333L14.833 5.521Q15.104 5.229 15.521 5.229Q15.938 5.229 16.229 5.521Q16.5 5.812 16.5 6.219Q16.5 6.625 16.229 6.917L8.688 14.458Q8.521 14.625 8.344 14.698Q8.167 14.771 7.979 14.771Z" />
</svg>
Save all changes
</button>
<button
className="linear flex flex-row items-center rounded-xl bg-gray-100 px-4 py-3 text-base font-medium text-navy-700 transition duration-200 hover:bg-gray-200 active:bg-gray-300"
data-ripple-light
>
<svg
className="mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1920 1920"
height="20"
width="20"
>
<g>
<polygon fill="#8A92B2" points="959.8,80.7 420.1,976.3 959.8,731 " />
<polygon fill="#62688F" points="959.8,731 420.1,976.3 959.8,1295.4 " />
<polygon fill="#62688F" points="1499.6,976.3 959.8,80.7 959.8,731 " />
<polygon fill="#454A75" points="959.8,1295.4 1499.6,976.3 959.8,731 " />
<polygon
fill="#8A92B2"
points="420.1,1078.7 959.8,1839.3 959.8,1397.6 "
/>
<polygon
fill="#62688F"
points="959.8,1397.6 959.8,1839.3 1499.9,1078.7 "
/>
</g>
</svg>
Pay safely with Ethereum
</button>