Action Oriented Hero Strip

An action oriented hero strip built with pure HTML and CSS that prioritizes a clear call to action within a horizontally compact layout, encouraging users to take the next step immediately without distraction or reliance on JavaScript.

Usage

This component is ideal for scenarios where user action is the primary goal, such as signup prompts, feature trials, download sections, onboarding entry points, or promotional strips that should convert attention into interaction quickly.

Implementation

The strip layout is created using CSS flex alignment, horizontal spacing control, and button emphasis styling, allowing messaging and action elements to sit side by side while remaining responsive and lightweight.

HTML

<section class="hero-action">
  <p class="hero-action__text">Upgrade for analytics</p>
  <button class="hero-action__btn">Upgrade</button>
</section>

<section class="hero-action">
  <p class="hero-action__text">Upgrade for analytics</p>
  <button class="hero-action__btn">Upgrade</button>
</section>

CSS

.hero-action {
  width: 200px;
  padding: 0.75rem 1rem;
  border-radius: 16px;
  background: radial-gradient(circle at top, #eef2ff, #ffffff);
  box-shadow: 0 18px 36px rgba(0,0,0,0.14);
  display: grid;
  gap: 0.5rem;
  text-align: center;
}

.hero-action__text {
  font-size: 13px;
  color: #374151;
}

.hero-action__btn {
  padding: 0.4rem;
  border-radius: 999px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.hero-action__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(99,102,241,0.35);
}

@media (prefers-color-scheme: dark) {
  .hero-action {
    background: radial-gradient(circle at top, #1e1b4b, #020617);
  }
  .hero-action__text {
    color: #d1d5db;
  }
}

.hero-action {
  width: 200px;
  padding: 0.75rem 1rem;
  border-radius: 16px;
  background: radial-gradient(circle at top, #eef2ff, #ffffff);
  box-shadow: 0 18px 36px rgba(0,0,0,0.14);
  display: grid;
  gap: 0.5rem;
  text-align: center;
}

.hero-action__text {
  font-size: 13px;
  color: #374151;
}

.hero-action__btn {
  padding: 0.4rem;
  border-radius: 999px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.hero-action__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(99,102,241,0.35);
}

@media (prefers-color-scheme: dark) {
  .hero-action {
    background: radial-gradient(circle at top, #1e1b4b, #020617);
  }
  .hero-action__text {
    color: #d1d5db;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Designed around a single primary action
• Uses horizontal layout for fast scanning
• Keeps copy short and action focused
• Optimized for conversion driven sections

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.