CSS-Only Morph Tabs — codepeek.dev

Navigation · community component

CSSMIT licenseUpdated today

◉ 1 views

Live

<!--
  Author: @mateo_r
  License: MIT
  Tags: #css #css-only
-->
<div class="mt-tabs"><input type="radio" id="mt1" name="mt" checked><label for="mt1">Overview</label><input type="radio" id="mt2" name="mt"><label for="mt2">Activity</label><input type="radio" id="mt3" name="mt"><label for="mt3">Settings</label><i class="mt-indicator"></i></div>

/*
 * Author: @mateo_r
 * License: MIT
 * Tags: #css #css-only
 */

.mt-tabs{position:relative;display:inline-flex;gap:4px;padding:5px;border-radius:12px;background:#f1f5f9;font:700 12px Inter}.mt-tabs input{position:absolute;opacity:0}.mt-tabs label{position:relative;z-index:1;padding:9px 16px;border-radius:9px;color:#64748b;cursor:pointer;transition:color .3s}.mt-tabs input:checked+label{color:#fff}.mt-indicator{position:absolute;top:5px;left:5px;height:calc(100% - 10px);width:100px;border-radius:9px;background:#6366f1;transition:transform .4s cubic-bezier(.4,0,.2,1);z-index:0}.mt-tabs:has(#mt2:checked) .mt-indicator{transform:translateX(108px)}.mt-tabs:has(#mt3:checked) .mt-indicator{transform:translateX(216px)}

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryNavigation

AccessibilityKeyboard ready

Explore similar parts →

Created by

Mateo Ruiz

@mateo_r

LicenseMIT

Free for personal and commercial projects. Attribution appreciated, not required.

Mateo Ruiz

Comments 0