# Slide-up add (C 021)

Category: Cards  
Tags: product, ecommerce, hover-reveal, minimal, light  
Page: https://designforai.dev/snippet/card-021

## Prompt

Build a 230px minimalist product card with no border: a 230px square image (10px radius, radial gradient from #fef3c7 to #d97706) containing a hidden black "Quick add +" button pinned to the bottom with 10px inset that slides up from 60px below and fades in on hover (250ms). Under the image: 14px product name in #1a1a1a and a 14px price in #555.

## HTML

```html
<article class="card-021">
  <div class="card-021__img"><button>Quick add +</button></div>
  <h3>Ceramic pour-over set</h3>
  <p>$64</p>
</article>
```

## CSS

```css
.card-021 {
  width: 230px;
  font-family: system-ui,sans-serif;
  color: #1a1a1a
}
.card-021__img {
  position: relative;
  height: 230px;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(circle at 60% 40%,#fef3c7,#d97706 80%)
}
.card-021 button {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transform: translateY(60px);
  opacity: 0;
  transition: transform .25s,opacity .25s
}
.card-021:hover button {
  transform: none;
  opacity: 1
}
.card-021 h3 {
  margin: 12px 0 2px;
  font-size: 14px;
  font-weight: 500
}
.card-021 p {
  margin: 0;
  font-size: 14px;
  color: #555
}
.card-021 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```