Buy Now Button
<button class="flex overflow-hidden items-center text-sm font-medium bg-orange-600 text-white shadow hover:bg-orange-700 h-9 px-4 py-2 max-w-52 whitespace-pre group relative w-full justify-center gap-2 rounded-md transition-all duration-300 ease-out hover:ring-2 hover:ring-orange-600 hover:ring-offset-2">
<span class="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-white opacity-15 transition-all duration-1000 ease-out group-hover:-translate-x-40"></span>
<div class="flex items-center">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
<path d="M7 4V2a1 1 0 0 1 2 0v2h6V2a1 1 0 1 1 2 0v2h1a3 3 0 0 1 3 3v1H3V7a3 3 0 0 1 3-3h1zM3 10h18v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-9zm7 2a1 1 0 1 0-2 0v2H6a1 1 0 1 0 0 2h2v2a1 1 0 1 0 2 0v-2h2a1 1 0 1 0 0-2h-2v-2z"></path>
</svg>
<span class="ml-1 text-white">Buy Now</span>
</div>
<div class="ml-2 flex items-center gap-1 text-sm">
<span class="inline-block tabular-nums tracking-wider font-display font-medium text-white">$19</span>
</div>
</button>About Buy Now Button
Buy Now Button is a button built from plain CSS, with no animation or generated content involved. Every format shown on this page is the same component, so you can take HTML and Tailwind depending on how your project is set up. Nothing is minified and nothing depends on a framework.
When to use
- Share rows, sign in screens and anywhere a platform needs to be recognised instantly, where a buy and purchase button fits the surrounding design
- Repeated use across a page, since there is no animation to become tiring when several appear together
- Palettes built around orange and white, where this button can be dropped in without retheming
How it works
Buy Now Button carries its styling in utility classes rather than a stylesheet, so the markup and the appearance live in the same place. Copy the classes and the structure together, since neither works without the other.
Accessibility
Built on a native <button> element, so keyboard focus and screen reader semantics work without extra attributes. Nothing in the source contradicts keyboard or screen reader use.
Browser support
Everything this component uses has been supported across browsers for years, so no fallback is needed.
Related components
Frequently asked questions
Buy Now Button
<button class="flex overflow-hidden items-center text-sm font-medium bg-orange-600 text-white shadow hover:bg-orange-700 h-9 px-4 py-2 max-w-52 whitespace-pre group relative w-full justify-center gap-2 rounded-md transition-all duration-300 ease-out hover:ring-2 hover:ring-orange-600 hover:ring-offset-2">
<span class="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-white opacity-15 transition-all duration-1000 ease-out group-hover:-translate-x-40"></span>
<div class="flex items-center">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
<path d="M7 4V2a1 1 0 0 1 2 0v2h6V2a1 1 0 1 1 2 0v2h1a3 3 0 0 1 3 3v1H3V7a3 3 0 0 1 3-3h1zM3 10h18v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-9zm7 2a1 1 0 1 0-2 0v2H6a1 1 0 1 0 0 2h2v2a1 1 0 1 0 2 0v-2h2a1 1 0 1 0 0-2h-2v-2z"></path>
</svg>
<span class="ml-1 text-white">Buy Now</span>
</div>
<div class="ml-2 flex items-center gap-1 text-sm">
<span class="inline-block tabular-nums tracking-wider font-display font-medium text-white">$19</span>
</div>
</button>What is inside Buy Now Button
Buy Now Button is a button supplied as HTML and Tailwind, with the styling carried by utility classes rather than a stylesheet.
Accessibility check
- Built on a native <button> element, so keyboard focus and screen reader semantics work without extra attributes.
These notes are generated by reading this component's own source, so they describe what it actually does rather than what a template says. Copy the code above in HTML, Tailwind and adapt it freely.