This navigation bar includes a call-to-action button, perfect for SaaS websites and conversion-focused pages.
HTML
<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;
}
}
Notes
- Conversion-focused layout
- SaaS-ready design
- Clear CTA placement
- Modern UI style
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.