Home
OmKar Mehta
Amazon shopping buy now button

Amazon shopping buy now button

Amazon shopping buy now button

This tailwind example is contributed by OmKar Mehta, on 26-Jun-2024. Component is made with Tailwind CSS v3. It is responsive.

Button

Author OmKar Mehta

2.3k

7

Fork Fullscreen

<button class="flex gap-2 items-center bg-yellow-400 hover:bg-yellow-500 active:bg-yellow-600 text-black font-bold py-2 px-4 rounded-lg border border-yellow-500 transition duration-200 ease-in-out">
  
  <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="0 -1 20 20" version="1.1">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Dribbble-Light-Preview" transform="translate(-220.000000, -7479.000000)" fill="#000000">
            <g id="icons" transform="translate(56.000000, 160.000000)">
                <path d="M181.251105,7332.71631 C181.644105,7332.61435 182.555105,7332.451 182.942105,7332.53614 C183.487105,7332.58465 183.815105,7332.67473 183.924105,7332.8064 C184.155105,7333.14894 183.809105,7334.3498 183.651105,7334.74084 C183.512105,7335.08536 182.861105,7336.19019 182.524105,7336.19019 C182.421105,7336.19019 182.343105,7336.11495 182.396105,7335.97437 C183.633105,7333.09449 183.080105,7333.17072 181.251105,7333.32813 C181.015105,7333.35684 180.149105,7333.53009 180.251105,7333.32813 C180.251105,7333.08954 181.012105,7332.77769 181.251105,7332.71631 M172.633105,7327.47828 C172.633105,7327.94654 172.751105,7328.32175 172.987105,7328.60291 C173.663105,7329.40876 174.897105,7328.97712 175.415105,7328.01881 C175.700105,7327.52976 175.996105,7326.57442 175.996105,7325.33594 C174.996105,7325.33594 174.678105,7325.38445 174.315105,7325.48048 C173.248105,7325.78045 172.633105,7326.44671 172.633105,7327.47828 M169.506105,7327.83864 C169.506105,7326.15169 170.414105,7324.96965 171.815105,7324.38258 C173.052105,7323.86086 174.759105,7323.7183 175.996105,7323.64405 C175.996105,7322.16104 175.793105,7320.97999 174.233105,7320.97999 C173.732105,7320.97999 172.837105,7321.53537 172.633105,7322.46101 C172.584105,7322.70059 172.463105,7322.87285 172.269105,7322.90849 L170.178105,7322.67386 C169.925105,7322.61446 169.827105,7322.47586 169.887105,7322.23628 C170.309105,7320.05039 172.145105,7319.11683 174.233105,7319.00001 C175.233105,7319.00001 176.745105,7318.98714 177.924105,7320.06227 C179.198105,7321.3245 178.996105,7322.91443 178.996105,7327.02882 C178.996105,7328.01683 179.011105,7328.11187 179.687105,7328.98999 C179.823105,7329.19195 179.835105,7329.38401 179.637105,7329.53053 C178.631105,7330.39479 178.084105,7330.86206 177.999105,7330.93433 C177.853105,7331.04224 177.676105,7331.05412 177.470105,7330.96997 C176.575105,7330.21065 176.790105,7330.25619 176.233105,7329.56617 C175.104105,7330.78385 174.217105,7331.11451 172.706105,7331.11451 C170.910105,7331.11451 169.506105,7330.00473 169.506105,7327.83864 M164.324105,7332.94995 C167.354105,7334.69035 170.651105,7335.56055 174.215105,7335.56055 C176.590105,7335.56055 178.936105,7335.12199 181.251105,7334.24585 C181.602105,7334.10725 181.972105,7333.83698 182.187105,7334.13794 C182.290105,7334.28248 182.257105,7334.41415 182.087105,7334.53394 C179.844105,7336.13772 176.718105,7337 173.996105,7337 C170.145105,7337 166.719105,7335.5853 164.106105,7333.25586 C163.873105,7333.06479 164.059105,7332.78363 164.324105,7332.94995" id="amazon-[#160]"></path>
            </g>
        </g>
    </g>
  </svg>
  
  <span>Buy Now</span>
</button>

Related Examples

futuristic button

Author:
Crimson

1 year ago

1k
Button with hover animation

Author:
Andrew

1 year ago

2.5k
Continue with Social Login - Continue with Google, LinkedIn, Twitter, Facebook, GitHub, Apple
Streamline your account creation and login process. Use our secure social login buttons to quickly sign in or register using your existing Google, LinkedIn, Twitter, Facebook, GitHub, or Apple account.

Author:
Homayoun

4 months ago

382
Download on the App Store light button

Author:
Simon Scheffer

2 years ago

13.2k
Animated button
on hover underline will go from left to right

Author:
Anonymous

1 year ago

5.3k
Buttons with Icon

Author:
_Amar_

3 years ago

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

Author:
Md. Tofayel islam

1 year ago

4.4k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

1 year ago

1.5k
strawbery
by salvator

Author:
Baraka Salvator

9 months ago

906
Social buttons
Mono-color Social buttons change colors according to your need

Author:
Arya

3 years ago

12.2k
Call to action buttons
Pair of active primary and secondary buttons. Elevated buttons w/ border bottom

Author:
Hyun-woo Cho

2 years ago

9.8k
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

411

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12