→ Marcus Reynolds
→ Dynamic Hero Section with Dark Mode Togg...

Dynamic Hero Section with Dark Mode Toggle

A striking full-width hero section with background image overlay, featuring theme toggle between light and dark modes, responsive design, and clear call-to-action buttons.

This Example is contributed by Marcus Reynolds, on 26-Feb-2025. It is responsive. similar terms for this example are Theme Toggle,Toggle,Toggle Button

Hero Toggle switch Dark Mode Background Overlay

Author Marcus Reynolds

Fork Fullscreen

<div class="hero-container">
  <div class="hero-content">
    <h1>Discover the Next Generation</h1>
    <p>Experience innovation like never before with our revolutionary products designed to transform your everyday life.</p>
    <div class="cta-buttons">
      <a href="#" class="btn primary">Get Started</a>
      <a href="#" class="btn secondary">Learn More</a>
    </div>
  </div>
  <button class="theme-toggle" aria-label="Toggle dark mode">
    <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
      <path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"></path>
    </svg>
    <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
      <path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27105 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z"></path>
    </svg>
  </button>
</div>

Related Examples

Hero Section with Call to Action

Author:
Anonymous

2 months ago
Fullscreen Hero Section with Modern Parallax Effect

Author:
Bishnu Thapa

1 month ago
Dynamic Hero Banner with Call-to-Action

Author:
Sammy Rodriguez

1 month ago
Hero with Image
Capture your audience's attention with a fully responsive hero section, optimized for all screen sizes. Includes a compelling headline, subtext, and a clear call-to-action button.

Author:
Anonymous

2 months ago
Responsive Hero Section with Parallax Background Image
A stunning full-width background image section with overlay text and call-to-action buttons perfect for landing pages and hero areas.

Author:
Bishnu Thapa

1 month ago
Hero

Author:
Anonymous

1 month ago
Header with Elegant Hero Section
A modern navigation header paired with a clean, impactful hero section perfect for business and portfolio websites.

Author:
Morgan

2 months ago
Dynamic Hero Section with Animated Call-to-Action
An eye-catching hero section with animated gradient background, floating elements, and a clear call-to-action that instantly draws visitor attention.

Author:
Alex Morgan

1 month ago
Dynamic SVG Pattern Hero Banner for Modern Websites
A visually striking hero banner with dynamic SVG pattern background that captures attention and enhances the modern aesthetic of your website.

Author:
Alex Morgan

1 month ago
Responsive Hero Banner with Floating Elements

Author:
Julian Parker

1 month ago
Hero with backgound bubbles

Author:
Alexis Rivera

1 month ago
Clean Hero Section Design
Capture your audience's attention immediately with this striking hero section, featuring a clear call-to-action button to drive conversions.

Author:
Oliver

2 months ago

Didn't find component you were looking for?

Search from 500+ components