Pure CSSMIT licensed

Hover-Reveal "Add to Cart" Button

A clean, minimal product card that keeps the layout calm by hiding the CTA — the 'Add to Cart' button slides and fades up into view only when the shopper hovers or keyboard-focuses the card. The single most-searched hover-CTA pattern in Tier-1 e-commerce.

Published Jul 13, 2026

Live Demo

Try it

The code

<article class="cpc-01">
  <div class="cpc-01__card">
    <div class="cpc-01__media" role="img" aria-label="Product photo: Aurora wireless headphones"><span>product shot</span></div>
    <div class="cpc-01__body">
      <p class="cpc-01__brand">SoundField</p>
      <h3 class="cpc-01__name">Aurora Wireless Headphones</h3>
      <p class="cpc-01__price">$149.00</p>
      <button class="cpc-01__cta" type="button">Add to Cart</button>
    </div>
  </div>
</article>

<article class="cpc-01">
  <div class="cpc-01__card">
    <div class="cpc-01__media" role="img" aria-label="Product photo: Aurora wireless headphones"><span>product shot</span></div>
    <div class="cpc-01__body">
      <p class="cpc-01__brand">SoundField</p>
      <h3 class="cpc-01__name">Aurora Wireless Headphones</h3>
      <p class="cpc-01__price">$149.00</p>
      <button class="cpc-01__cta" type="button">Add to Cart</button>
    </div>
  </div>
</article>

.cpc-01,
.cpc-01 *,
.cpc-01 *::before,
.cpc-01 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cpc-01 ::selection {
  background: oklch(0.72 0.15 250);
  color: #fff;
}

.cpc-01 {
  --accent: oklch(0.55 0.16 255);
  --dur: .32s;
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: #f4f5f7;
}

.cpc-01__card {
  width: 300px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.06),0 12px 32px -18px rgba(16,24,40,.28);
  transition: box-shadow var(--dur);
}

.cpc-01__card:hover,
.cpc-01__card:focus-within {
  box-shadow: 0 1px 2px rgba(16,24,40,.06),0 26px 50px -22px rgba(16,24,40,.4);
}

.cpc-01__media {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,#e9edf3,#dfe4ec),repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 12px,transparent 12px 24px);
}

.cpc-01__media {
  background-image: url("https://loremflickr.com/600/600/headphones?lock=11");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cpc-01__media span {
  display: none;
}

.cpc-01__body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cpc-01__brand {
  font: 11px ui-monospace,Menlo,monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #98a2b3;
}

.cpc-01__name {
  font-size: 17px;
  font-weight: 600;
  color: #101828;
  line-height: 1.3;
}

.cpc-01__price {
  font-size: 18px;
  font-weight: 700;
  color: #101828;
  margin-top: 2px;
  transition: transform var(--dur);
}

.cpc-01__cta {
  margin-top: 14px;
  height: 46px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur),transform var(--dur),background var(--dur);
}

.cpc-01__card:hover .cpc-01__cta,
.cpc-01__card:focus-within .cpc-01__cta {
  opacity: 1;
  transform: translateY(0);
}

.cpc-01__cta:hover {
  background: color-mix(in oklch,var(--accent) 88%,#000);
}

.cpc-01__cta:focus-visible {
  outline: 3px solid color-mix(in oklch,var(--accent) 45%,#fff);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cpc-01__card,
    .cpc-01__cta,
    .cpc-01__price {
    transition: none;
  }

  .cpc-01__cta {
    opacity: 1;
    transform: none;
  }
}

.cpc-01,
.cpc-01 *,
.cpc-01 *::before,
.cpc-01 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cpc-01 ::selection {
  background: oklch(0.72 0.15 250);
  color: #fff;
}

.cpc-01 {
  --accent: oklch(0.55 0.16 255);
  --dur: .32s;
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: #f4f5f7;
}

.cpc-01__card {
  width: 300px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.06),0 12px 32px -18px rgba(16,24,40,.28);
  transition: box-shadow var(--dur);
}

.cpc-01__card:hover,
.cpc-01__card:focus-within {
  box-shadow: 0 1px 2px rgba(16,24,40,.06),0 26px 50px -22px rgba(16,24,40,.4);
}

.cpc-01__media {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,#e9edf3,#dfe4ec),repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 12px,transparent 12px 24px);
}

.cpc-01__media {
  background-image: url("https://loremflickr.com/600/600/headphones?lock=11");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cpc-01__media span {
  display: none;
}

.cpc-01__body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cpc-01__brand {
  font: 11px ui-monospace,Menlo,monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #98a2b3;
}

.cpc-01__name {
  font-size: 17px;
  font-weight: 600;
  color: #101828;
  line-height: 1.3;
}

.cpc-01__price {
  font-size: 18px;
  font-weight: 700;
  color: #101828;
  margin-top: 2px;
  transition: transform var(--dur);
}

.cpc-01__cta {
  margin-top: 14px;
  height: 46px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur),transform var(--dur),background var(--dur);
}

.cpc-01__card:hover .cpc-01__cta,
.cpc-01__card:focus-within .cpc-01__cta {
  opacity: 1;
  transform: translateY(0);
}

.cpc-01__cta:hover {
  background: color-mix(in oklch,var(--accent) 88%,#000);
}

.cpc-01__cta:focus-visible {
  outline: 3px solid color-mix(in oklch,var(--accent) 45%,#fff);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cpc-01__card,
    .cpc-01__cta,
    .cpc-01__price {
    transition: none;
  }

  .cpc-01__cta {
    opacity: 1;
    transform: none;
  }
}

/* No JavaScript — the CTA reveal is a pure :hover / :focus-within transition. */

/* No JavaScript — the CTA reveal is a pure :hover / :focus-within transition. */

Here's a working CSS Product Card from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Hover-Reveal "Add to Cart" Button
Source: https://codefronts.com/components/css-product-cards/hover-reveal-add-to-cart-button/

A clean, minimal product card that keeps the layout calm by hiding the CTA — the 'Add to Cart' button slides and fades up into view only when the shopper hovers or keyboard-focuses the card. The single most-searched hover-CTA pattern in Tier-1 e-commerce.
## HTML
```html
<article class="cpc-01">
  <div class="cpc-01__card">
    <div class="cpc-01__media" role="img" aria-label="Product photo: Aurora wireless headphones"><span>product shot</span></div>
    <div class="cpc-01__body">
      <p class="cpc-01__brand">SoundField</p>
      <h3 class="cpc-01__name">Aurora Wireless Headphones</h3>
      <p class="cpc-01__price">$149.00</p>
      <button class="cpc-01__cta" type="button">Add to Cart</button>
    </div>
  </div>
</article>
```
## CSS
```css
.cpc-01,
.cpc-01 *,
.cpc-01 *::before,
.cpc-01 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cpc-01 ::selection {
  background: oklch(0.72 0.15 250);
  color: #fff;
}

.cpc-01 {
  --accent: oklch(0.55 0.16 255);
  --dur: .32s;
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: #f4f5f7;
}

.cpc-01__card {
  width: 300px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.06),0 12px 32px -18px rgba(16,24,40,.28);
  transition: box-shadow var(--dur);
}

.cpc-01__card:hover,
.cpc-01__card:focus-within {
  box-shadow: 0 1px 2px rgba(16,24,40,.06),0 26px 50px -22px rgba(16,24,40,.4);
}

.cpc-01__media {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,#e9edf3,#dfe4ec),repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 12px,transparent 12px 24px);
}

.cpc-01__media {
  background-image: url("https://loremflickr.com/600/600/headphones?lock=11");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cpc-01__media span {
  display: none;
}

.cpc-01__body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cpc-01__brand {
  font: 11px ui-monospace,Menlo,monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #98a2b3;
}

.cpc-01__name {
  font-size: 17px;
  font-weight: 600;
  color: #101828;
  line-height: 1.3;
}

.cpc-01__price {
  font-size: 18px;
  font-weight: 700;
  color: #101828;
  margin-top: 2px;
  transition: transform var(--dur);
}

.cpc-01__cta {
  margin-top: 14px;
  height: 46px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur),transform var(--dur),background var(--dur);
}

.cpc-01__card:hover .cpc-01__cta,
.cpc-01__card:focus-within .cpc-01__cta {
  opacity: 1;
  transform: translateY(0);
}

.cpc-01__cta:hover {
  background: color-mix(in oklch,var(--accent) 88%,#000);
}

.cpc-01__cta:focus-visible {
  outline: 3px solid color-mix(in oklch,var(--accent) 45%,#fff);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cpc-01__card,
    .cpc-01__cta,
    .cpc-01__price {
    transition: none;
  }

  .cpc-01__cta {
    opacity: 1;
    transform: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — the CTA reveal is a pure :hover / :focus-within transition. */
```

Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.

Here's a working CSS Product Card from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Hover-Reveal "Add to Cart" Button
Source: https://codefronts.com/components/css-product-cards/hover-reveal-add-to-cart-button/

A clean, minimal product card that keeps the layout calm by hiding the CTA — the 'Add to Cart' button slides and fades up into view only when the shopper hovers or keyboard-focuses the card. The single most-searched hover-CTA pattern in Tier-1 e-commerce.
## HTML
```html
<article class="cpc-01">
  <div class="cpc-01__card">
    <div class="cpc-01__media" role="img" aria-label="Product photo: Aurora wireless headphones"><span>product shot</span></div>
    <div class="cpc-01__body">
      <p class="cpc-01__brand">SoundField</p>
      <h3 class="cpc-01__name">Aurora Wireless Headphones</h3>
      <p class="cpc-01__price">$149.00</p>
      <button class="cpc-01__cta" type="button">Add to Cart</button>
    </div>
  </div>
</article>
```
## CSS
```css
.cpc-01,
.cpc-01 *,
.cpc-01 *::before,
.cpc-01 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cpc-01 ::selection {
  background: oklch(0.72 0.15 250);
  color: #fff;
}

.cpc-01 {
  --accent: oklch(0.55 0.16 255);
  --dur: .32s;
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: #f4f5f7;
}

.cpc-01__card {
  width: 300px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.06),0 12px 32px -18px rgba(16,24,40,.28);
  transition: box-shadow var(--dur);
}

.cpc-01__card:hover,
.cpc-01__card:focus-within {
  box-shadow: 0 1px 2px rgba(16,24,40,.06),0 26px 50px -22px rgba(16,24,40,.4);
}

.cpc-01__media {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,#e9edf3,#dfe4ec),repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 12px,transparent 12px 24px);
}

.cpc-01__media {
  background-image: url("https://loremflickr.com/600/600/headphones?lock=11");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cpc-01__media span {
  display: none;
}

.cpc-01__body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cpc-01__brand {
  font: 11px ui-monospace,Menlo,monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #98a2b3;
}

.cpc-01__name {
  font-size: 17px;
  font-weight: 600;
  color: #101828;
  line-height: 1.3;
}

.cpc-01__price {
  font-size: 18px;
  font-weight: 700;
  color: #101828;
  margin-top: 2px;
  transition: transform var(--dur);
}

.cpc-01__cta {
  margin-top: 14px;
  height: 46px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur),transform var(--dur),background var(--dur);
}

.cpc-01__card:hover .cpc-01__cta,
.cpc-01__card:focus-within .cpc-01__cta {
  opacity: 1;
  transform: translateY(0);
}

.cpc-01__cta:hover {
  background: color-mix(in oklch,var(--accent) 88%,#000);
}

.cpc-01__cta:focus-visible {
  outline: 3px solid color-mix(in oklch,var(--accent) 45%,#fff);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cpc-01__card,
    .cpc-01__cta,
    .cpc-01__price {
    transition: none;
  }

  .cpc-01__cta {
    opacity: 1;
    transform: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — the CTA reveal is a pure :hover / :focus-within transition. */
```

How this works

The card is a normal image/name/price stack; the CTA sits at the bottom translated down (transform: translateY()) at opacity:0 so it takes no visual weight at rest. On :hover — and critically on :focus-within — the button eases up to its resting position and full opacity in one compositor-friendly transition.

Using :focus-within means keyboard and screen-reader users reach the same button by tabbing, and the price nudges up slightly to make room so nothing overlaps.

Make it yours

Change the reveal direction by editing the button's start translateY (or swap to translateX for a slide-in-from-side).
Retheme with --accent; it drives the button fill and the focus ring.
Tune the reveal speed with --dur; drop to 0s for an instant appear.
Keep the button in the DOM flow (as here) so layout never jumps — animate only transform/opacity.

Gotchas — read before shipping

A hover-only CTA is invisible on touch — this uses :focus-within and keeps the button in flow so it is always reachable; never gate a purchase action behind hover alone.
Don't display:none the button; that removes it from the tab order. Hide it with opacity/transform instead.
Ensure the revealed button meets a 44px minimum hit target for mobile and accessibility.

Browser support

Chrome	Safari	Firefox	Edge
111+	16.2+	113+	111+

Floor set by oklch(), color-mix() as this demo is written. The core technique itself goes back further — Chrome 80+.

:focus-within + transform/opacity transitions are universally supported; color-mix for the tint needs Chrome 111+/Safari 16.2+ (falls back to solid accent).

Techniques used in this demo

:focus-withinMDN ↗aspect-ratioMDN ↗role="" (ARIA)MDN ↗color-mix()MDN ↗oklch()MDN ↗