Multi-CTA Hero Template
Guide different types of users to the right place with a hero section that offers multiple paths.
This template provides two distinct call-to-action buttons, creating a clear visual hierarchy between a primary and a secondary action.
About the Multi-CTA Hero
Not all visitors are ready for the same commitment. Some may be ready to sign up or book a demo, while others are still in the exploration phase. This hero section caters to both by offering a primary CTA (e.g., "Get Started") and a less demanding secondary CTA (e.g., "See Features"). This allows users to choose their own journey, which can improve overall engagement.
Features
- Clear Visual Hierarchy: The primary button is styled to be more prominent (solid fill), while the secondary button is less so (outline style), guiding the user's attention.
- User-Choice Driven: Accommodates different stages of the user journey.
- Clean & Centered Layout: A simple, professional design that focuses on the message and the calls-to-action.
- Fully Responsive: The button group wraps naturally on smaller screens.
Code Breakdown
The component is split into CSS for the head and HTML for the body of your page.
The layout is centered using Flexbox. The two buttons are wrapped in a .button-group div, which is also a flex container. This allows for a clean gap between the buttons and enables flex-wrap: wrap to ensure they stack neatly on mobile screens.
The visual distinction is created with two modifier classes. The .cta-primary class has a solid background color, making it stand out. The .cta-secondary class has a transparent background and a visible border, giving it a lower visual weight. Hover states are defined for both to provide satisfying user feedback.