Navigation Bar with CTA Button

A navigation bar with CTA button built using pure HTML and CSS that combines standard navigation links with a visually distinct call to action element. It enhances conversion visibility and interaction hierarchy within responsive layouts.

Usage

Use this component when interfaces require prominent action emphasis, such as landing pages, SaaS websites, marketing sites, or dashboards where a signup, login, or primary action needs clear visibility.

Implementation

The layout uses flex based horizontal alignment to separate navigation links from the highlighted CTA button. CSS controls spacing, contrast styling, hover states, and responsive stacking across breakpoints.

HTML

<nav class="ss-nav cta-nav">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <button class="nav-btn">Sign Up</button>
</nav>

<nav class="ss-nav cta-nav">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <button class="nav-btn">Sign Up</button>
</nav>

CSS

.cta-nav{
  display:flex;
  align-items:center;
  gap:14px;

  padding:10px 16px;          
  max-width:520px;            
  margin:auto;

  border-radius:14px;
  background:var(--nav-bg);
  border:1px solid var(--nav-border);
}

.cta-nav a{
  text-decoration:none;
  font-size:13px;
  color:var(--nav-link);
}

.nav-btn{
  margin-left:auto;
  padding:8px 14px;
  font-size:13px;
  background:var(--btn-bg);
  color:var(--btn-text);
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}

.nav-btn:hover{
  background:var(--btn-hover);
  transform:translateY(-1px);
}

:root{
  --nav-bg:#ffffff;
  --nav-border:#e5e7eb;
  --nav-link:#0f172a;
  --btn-bg:#2563eb;
  --btn-hover:#1d4ed8;
  --btn-text:#ffffff;
}

@media (prefers-color-scheme: dark){
  :root{
    --nav-bg:#020617;
    --nav-border:#1f2937;
    --nav-link:#e5e7eb;
    --btn-bg:#3b82f6;
    --btn-hover:#60a5fa;
    --btn-text:#ffffff;
  }
}

.cta-nav{
  display:flex;
  align-items:center;
  gap:14px;

  padding:10px 16px;          
  max-width:520px;            
  margin:auto;

  border-radius:14px;
  background:var(--nav-bg);
  border:1px solid var(--nav-border);
}

.cta-nav a{
  text-decoration:none;
  font-size:13px;
  color:var(--nav-link);
}

.nav-btn{
  margin-left:auto;
  padding:8px 14px;
  font-size:13px;
  background:var(--btn-bg);
  color:var(--btn-text);
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}

.nav-btn:hover{
  background:var(--btn-hover);
  transform:translateY(-1px);
}

:root{
  --nav-bg:#ffffff;
  --nav-border:#e5e7eb;
  --nav-link:#0f172a;
  --btn-bg:#2563eb;
  --btn-hover:#1d4ed8;
  --btn-text:#ffffff;
}

@media (prefers-color-scheme: dark){
  :root{
    --nav-bg:#020617;
    --nav-border:#1f2937;
    --nav-link:#e5e7eb;
    --btn-bg:#3b82f6;
    --btn-hover:#60a5fa;
    --btn-text:#ffffff;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Includes a visually distinct CTA button
• Enhances conversion focused navigation structure
• Fully responsive across breakpoints
• Suitable for landing pages and SaaS websites
• Easy to customize button color and spacing

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.