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

Button

Author OmKar Mehta

Tailwind v3.4 2.8k 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

Buttons popup on hover
Popup buttons on hover

Sophia Baker

3 years ago

14.9k
Download on the Mac App Store dark button

Simon Scheffer

3 years ago

8.6k
Simple Btn

Abid Ullah

2 years ago

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

Hyun-woo Cho

3 years ago

10.5k
Canlı Yayın Butonu
Pulse efekt içeren canlı yayın butonu.

Sedat Kumcu

2 years ago

2.5k
button-neon-purple-super

Mohammad Rashel

10 months ago

1.1k
Previous Next Buttons
Pagination buttons

Alok

4 years ago

15.4k
less is more
less is more by salvator

Baraka Salvator

1 year ago

1.6k
Confirm and cancel buttons

Samuel Dawson

3 years ago

17.1k
chair
by salvator

Baraka Salvator

1 year ago

1.5k
Background gradient changing button
Automatic and continuously gradient-changing button. Cyclic color changing button.

Ingrid Schulz

3 years ago

11.8k
SCROLL ABAJO
para poner que a llegado al final de la pagina

Raul antonio de la cruz hernandez

1 year ago

1.4k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.