Modern CTA Design with Overlapping Avatars and Bold Call-to-Action Button

Looking to boost conversions or encourage user interaction on your site? This modern Call-To-Action (CTA) section design features overlapping user avatars, a clean headline, and a friendly message. Ideal for landing pages or service-based websites, it’s built with simple HTML and CSS—no JavaScript required!

Preview

HTML CODE

 <section class="questions-section">
    <div class="questions-avatars">
      <img src="https://becreatives.co/wp-content/uploads/2024/11/editors.png.webp" alt="Creative 1">
      <img src="https://becreatives.co/wp-content/uploads/2024/11/editors.png.webp" alt="Creative 2">
      <img src="https://becreatives.co/wp-content/uploads/2024/11/editors.png.webp" alt="Creative 3">
    </div>
    <h1 class="questions-title">Got Questions?</h1>
    <p class="questions-text">
      Book a chat with one of our awesome creatives. No sales pitch, just the answers you need,
      so we can match you with the ideal subscription plan and perfect video editor.
    </p>
    <a href="#" class="questions-button">Book a call with us today!</a>
  </section>

CSS CODE

  <style>
    :root {
      --bg: #121212;
      --text-primary: #ffffff;
      --text-secondary: #bbbbbb;
      --accent: #FFC107;
      --button-text: #000000;
      --avatar-border: #121212;
    }
    * {
      box-sizing: border-box;
    }

    .questions-section {
      padding: 60px 20px;
      text-align: center;
    }
    .questions-avatars {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    .questions-avatars img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--avatar-border);
      background-color: var(--accent);
      margin-left: -15px;
      transition: transform 0.3s;
    }
    .questions-avatars img:first-child {
      margin-left: 0;
    }
    .questions-avatars img:hover {
      transform: scale(1.1);
    }
    .questions-title {
      font-size: 2.5rem;
      margin: 0 0 20px;
    }
    .questions-text {
      font-size: 1.125rem;
      color: var(--text-secondary);
      max-width: 700px;
      margin: 0 auto 30px;
      line-height: 1.6;
    }
    .questions-button {
      display: inline-block;
      background-color: var(--accent);
      color: var(--button-text);
      padding: 15px 30px;
      font-size: 1.25rem;
      text-decoration: none;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.3);
      transition: background-color 0.3s, transform 0.3s;
    }
    .questions-button:hover {
      background-color: #e6ac00;
      transform: translateY(-2px);
    }
    @media (max-width: 600px) {
      .questions-avatars img {
        width: 50px;
        height: 50px;
      }
      .questions-title {
        font-size: 2rem;
      }
      .questions-text {
        font-size: 1rem;
      }
      .questions-button {
        font-size: 1rem;
        padding: 12px 24px;
      }
    }
  </style>

Features of This Design

• Responsive layout
• Overlapping avatars for social proof
• Bold CTA button to drive action
• Dark theme with great contrast

How to Customize

• Replace avatar images with your own team photos.
• Change button link to Calendly, WhatsApp, or your contact form.
• Adjust background and accent colors to match your brand.

Ishaan Singh

Ishaan is a passionate programmer with a knack for simplifying complex ideas. With expertise in Python and PHP, he enjoys creating small projects that help others learn and apply coding skills practically. Through his articles, Ishaan aims to inspire and educate budding developers.