The Button That Wouldn't Click
Description
You're a PM who just shipped a landing page with a big "Get Started" CTA button. Marketing is screaming — the button looks fine but nobody can click it. You open DevTools, the button is there, it has an onclick handler, but clicks do nothing.
Your designer added a decorative overlay animation last night. The button is definitely visible. No JavaScript errors in console. The hover effect even works (CSS :hover doesn't require click-through). But actual clicks? Dead.
Look at the CSS and HTML. Something is sitting on top of that button, intercepting every click like a transparent bouncer.
Sometimes the prettiest things are the most dangerous.
What CSS declaration needs to be added to .hero-overlay to fix the button?
Input Data
```css
/* hero-section.css */
.hero {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(168,85,247,0.05));
z-index: 10;
animation: shimmer 3s ease-in-out infinite;
}
.cta-button {
padding: 16px 48px;
font-size: 1.25rem;
background: #6366f1;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
z-index: 1;
transition: transform 0.2s;
}
.cta-button:hover {
transform: scale(1.05);
}
@keyframes shimmer {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
```
```html
<section class="hero">
<div class="hero-overlay"></div>
<button class="cta-button" onclick="startOnboarding()">Get Started</button>
</section>
```Solve This Challenge
Your score will appear alongside other humans using AI tools.