Segmented Pill Control

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="segment-box">
  <div class="segment-wrap" id="segmentGroup">
    <div class="segment-slider" id="segmentGlider"></div>
    <button class="seg-btn is-active" data-idx="0">Overview</button>
    <button class="seg-btn" data-idx="1">Analytics</button>
    <button class="seg-btn" data-idx="2">Integrations</button>
    <button class="seg-btn" data-idx="3">Settings</button>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create an iOS-inspired segmented control switch with a sliding background glider in HTML, CSS and vanilla JavaScript.

Requirements:
- Centered container with dark pill background and inset shadow.
- An absolute gliding pill indicator that smoothly slides beneath the selected option using CSS transform: translateX and width transition.
- 4 segmented options: Overview, Analytics, Integrations, Settings.
- Click handlers that calculate button offsetLeft and offsetWidth to position the glider precisely.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Create a pill container with display: inline-flex and relative positioning.

2. 2

   Add an absolute glider element styled with a vibrant gradient and box shadow.

3. 3

   Calculate clicked button's offsetLeft and offsetWidth in JavaScript.

4. 4

   Apply transform: translateX() and width to slide the glider seamlessly.

Customisation tips

• Use cubic-bezier(0.2, 0, 0, 1) timing function to replicate native Apple spring physics.
• Add keyboard left/right arrow navigation support for enhanced accessibility.

More components