How to Add a Floating CTA Button to a Hugo Site

Hugo is one of the fastest static site generators. Adding a floating CTA button is straightforward — create a partial template with the exported code, include it in your base layout, and Hugo will render it on every page at build time. Zero runtime overhead.

Why Add a CTA Button to Hugo?

Hugo sites build in milliseconds and serve static HTML with no server-side processing. A pure HTML + CSS CTA button is the perfect fit — it adds no build time, no runtime overhead, and no external dependencies. For documentation sites, personal blogs, and company pages built with Hugo, a floating CTA drives newsletter signups, contact form visits, or product page clicks without compromising Hugo's legendary speed.

Step-by-Step Instructions

Design your CTA button

Open the CTA Button Generator and customize your button using the visual editor. Pick colors, position, animation, hover effects, icon, and font. The live preview updates in real time so you see exactly what your visitors will get.

Export your code

When you are happy with the design, click "Get Code" to export a clean HTML + CSS snippet. The code is lightweight, has zero dependencies, and works on any website.

Create a partial template

Create a new file at layouts/partials/cta-button.html and paste your CTA button code into it.

<!-- layouts/partials/cta-button.html -->
<!-- paste your CTA button code here -->

Include the partial in your base layout

Open layouts/_default/baseof.html (or your theme's base template) and add {{ partial "cta-button.html" . }} just before the closing </body> tag.

    {{ partial "cta-button.html" . }}
  </body>
</html>

Build and verify

Run hugo server to start the dev server. Check any page — the floating CTA button should appear. Since it's rendered at build time, there's zero runtime overhead.

Best Practices for Hugo

Create the button as a Hugo partial (layouts/partials/cta-button.html) for clean organization and easy reuse across layouts.
If you're overriding a theme's layout, make sure your baseof.html includes all the blocks the theme expects — not just the CTA button partial.
Use Hugo's conditional logic ({{ if .IsPage }}) to show the button only on content pages, or only on specific sections.
Since Hugo outputs static files, the button works identically in development and production — no environment-specific behavior to worry about.

Ready to build your button?

Design it visually, export clean code, and paste it into your site.

Open the Generator

Frequently Asked Questions

Does it work with all Hugo themes?

Yes. If your theme uses baseof.html, include the partial there. If not, add the code to your theme's footer partial or the main layout file.

Will it work on Hugo sites hosted on Netlify or Vercel?

Yes. The button is part of your static HTML output, so it works on any static hosting platform.

Can I conditionally show the button on certain Hugo pages?

Yes. Wrap the partial include with Hugo's templating logic, like {{ if ne .Kind "home" }} to hide it on the homepage, or use front matter params to control visibility per page.

Do I need to override my theme's baseof.html to add the partial?

If your theme already has a baseof.html, copy it to layouts/_default/baseof.html in your project root (which overrides the theme's version) and add the partial include there.

How to Add a CTA Button to Hugo