Playful & Animated Style Navbar Template

Try out this playful & animated navbar. It's also mobile-responsive and accessible. Copy and paste the code straight into your own web projects.

Screenshot of the playful & animated navbar template

Get Source Code & Preview → Preview →

Visual Features

This navbar is perfect for creative portfolios, design agencies, or any brand with a fun and friendly personality. It uses CSS animations to create engaging micro-interactions that surprise and delight users without sacrificing usability.

Key Feature: Underline Draw Animation — Main navigation links feature a clean underline that animates from the center, drawing itself outwards on hover.
Key Feature: Reliable Growing CTA Button — The call-to-action button uses a smooth `scale` animation to grow on hover.
Accessibility-Minded — All animations respect the prefers-reduced-motion media query, providing a simple, non-moving alternative for users who are sensitive to motion.

Coding Best Practices

CSS custom properties (variables) are used for easy theme customization (colors, fonts).
The code is heavily commented to explain the purpose of each section.
A tiny, efficient JavaScript snippet is used for the mobile menu toggle, as it is the most accessible and modern method (superior to the older "checkbox hack").

Code

Here's the full code for the navbar template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Playful & Animated Navbar (Definitive Version)</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Playful Theme)
        ========================================
        */
        :root {
            --color-background: #fff;
            --color-text: #2c3e50;
            --color-primary: #e74c3c;
            --color-primary-darker: #c0392b; /* For reduced-motion hover */
            --color-secondary: #3498db;
            --color-highlight-bg: #f2f5f7;
            --font-family-sans-serif: "Nunito", system-ui, -apple-system, sans-serif;
            --font-weight-bold: 700;
            --navbar-height: 80px;
            --navbar-padding: 1.5rem;
            --container-width: 1140px;
            --transition-speed: 0.3s;
            --transition-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700&display=swap');
        
        *, *::before, *::after { box-sizing: border-box; }

body {
            margin: 0; font-family: var(--font-family-sans-serif);
            font-size: 1rem; font-weight: 500; line-height: 1.6;
            color: var(--color-text); background-color: var(--color-background);
        }
        
        .content { height: 200vh; padding: 120px 2rem; text-align: center; }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; color: inherit; }

/*
        ========================================
        Navbar Base & Mobile Styles
        ========================================
        */
        .navbar {
            height: var(--navbar-height); display: flex; align-items: center;
            background-color: var(--color-background);
            border-bottom: 2px solid var(--color-highlight-bg);
            position: sticky; top: 0; z-index: 1000;
        }
        .navbar__container {
            display: flex; justify-content: space-between; align-items: center;
            width: 100%; max-width: var(--container-width);
            margin: 0 auto; padding: 0 var(--navbar-padding);
        }
        .navbar__brand { font-size: 1.75rem; font-weight: var(--font-weight-bold); color: var(--color-primary); }
        .navbar__toggle { display: block; border: none; padding: 0.5rem; background: transparent; cursor: pointer; z-index: 1001; }
        .navbar__toggle .bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--color-text); border-radius: 3px; transition: all var(--transition-speed) var(--transition-bounce); }
        /* These transforms are for the mobile menu 'hamburger' to 'X' animation */
        .navbar__toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .navbar__toggle.is-active .bar:nth-child(2) { opacity: 0; }
        .navbar__toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
        
        .navbar__menu { display: none; flex-direction: column; width: 100%; position: absolute; top: var(--navbar-height); left: 0; background-color: var(--color-background); border-bottom: 2px solid var(--color-highlight-bg); box-shadow: 0 10px 20px rgba(0,0,0,0.04); z-index: 999; }
        .navbar__menu.is-active { display: flex; }
        .navbar__item { text-align: center; }
        .navbar__link { display: block; padding: 1.5rem; font-weight: var(--font-weight-bold); transition: background-color var(--transition-speed) ease; }
        .navbar__link:hover, .navbar__link:focus { background-color: var(--color-highlight-bg); }
        :is(.navbar__toggle, .navbar__link):focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }

/*
        ========================================
        Desktop Navbar Styles & Animations
        ========================================
        */
        @media (min-width: 768px) {
            .navbar__toggle { display: none; }
            .navbar__menu { display: flex; flex-direction: row; align-items: center; position: static; width: auto; background: none; border: none; box-shadow: none; }
            .navbar__list { display: flex; align-items: center; gap: 0.5rem; }
            .navbar__link { padding: 0.5rem 1rem; position: relative; }
            
            /* General hover rule that applies to non-CTA links. */
            .navbar__link:not(.navbar__link--cta):hover, 
            .navbar__link:not(.navbar__link--cta):focus { background-color: transparent; }
            
            /* Underline animation */
            .navbar__link:not(.navbar__link--cta)::after {
                content: ''; position: absolute; bottom: 0; left: 50%; width: 0;
                height: 3px; background-color: var(--color-secondary);
                transition: all var(--transition-speed) ease; transform: translateX(-50%);
            }
            .navbar__link:not(.navbar__link--cta):hover::after, .navbar__link:not(.navbar__link--cta):focus::after { width: 100%; }

/* CTA Button */
            .navbar__item--cta { margin-left: 1rem; }
            .navbar__link--cta {
                background-color: var(--color-primary); color: #fff;
                padding: 0.75rem 1.5rem; border-radius: 50px;
                transition: transform var(--transition-speed) var(--transition-bounce), 
                            background-color var(--transition-speed) ease;
            }
            
            .navbar__link--cta:hover, .navbar__link--cta:focus {
                background-color: var(--color-primary);
                transform: scale(1.1);
            }
        }
        
        /* Reduced Motion Accessibility */
        @media (prefers-reduced-motion: reduce) {
            /* Disable animations */
            .navbar__toggle .bar, .navbar__link:not(.navbar__link--cta)::after, .navbar__link--cta { transition: none; }
            /* Instantly show underline for non-CTA links on hover */
            .navbar__link:not(.navbar__link--cta):hover::after, .navbar__link:not(.navbar__link--cta):focus::after { width: 100%; }
            /* Disable scaling on CTA and just change color for feedback */
            .navbar__link--cta:hover, .navbar__link--cta:focus {
                transform: none;
                background-color: var(--color-primary-darker);
            }
        }
    </style>
</head>
<body>
    <header class="navbar">
        <div class="navbar__container">
            <a href="#" class="navbar__brand">Wobble</a>
            <button class="navbar__toggle" id="navbarToggle" aria-label="Toggle navigation" aria-controls="navbarMenu" aria-expanded="false">
                <span class="bar"></span><span class="bar"></span><span class="bar"></span>
            </button>
            <nav id="navbarMenu" class="navbar__menu" role="navigation" aria-labelledby="navbarToggle">
                <ul class="navbar__list">
                    <li class="navbar__item"><a href="#" class="navbar__link">Work</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Studio</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Careers</a></li>
                    <li class="navbar__item navbar__item--cta"><a href="#" class="navbar__link navbar__link--cta">Get in Touch</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main class="content">
        <h1>Fun, Animated Navbar</h1>
        <p>Hover over the links and the button to see the playful animations!</p>
    </main>
    
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const navbarToggle = document.getElementById('navbarToggle');
            const navbarMenu = document.getElementById('navbarMenu');
            if (navbarToggle && navbarMenu) {
                navbarToggle.addEventListener('click', function () {
                    navbarToggle.classList.toggle('is-active');
                    navbarMenu.classList.toggle('is-active');
                    const isExpanded = navbarToggle.getAttribute('aria-expanded') === 'true';
                    navbarToggle.setAttribute('aria-expanded', !isExpanded);
                });
            }
        });
    </script>
</body>
</html>

View Output