<style>
.tabs {
display: flex;
gap: 8px;
width: fit-content;
}
.tab {
padding: 8px 16px;
border: none;
background: none;
border-radius: 999rem;
font-size: 16px;
color: #71717a;
cursor: pointer;
position: relative;
font-weight: 500;
}
.tab.active {
color: #ffffff;
}
.tab.active::before {
content: "";
position: absolute;
height: 100%;
inset: 0;
background: #000;
border-radius: inherit;
z-index: -1;
}
::view-transition-group(*) {
animation-duration: 0.5s;
animation-timing-function: linear(
0,
0.186 3.5%,
0.352 7.1%,
0.496 10.8%,
0.623 14.7%,
0.679 16.7%,
0.732 18.8%,
0.78 20.9%,
0.821 23%,
0.86 25.2%,
0.895 27.5%,
0.925 29.8%,
0.951 32.2%,
0.97 34.2%,
0.986 36.3%,
1 38.5%,
1.012 40.7%,
1.021 43%,
1.028 45.4%,
1.033 48%,
1.036 50.7%,
1.037 54.8%,
1.034 59.6%,
1.012 76.6%,
1.004 84.2%,
1.001 91.3%,
1
);
}
::view-transition-group(tab-1),
::view-transition-group(tab-2),
::view-transition-group(tab-3),
::view-transition-group(tab-4) {
z-index: 1;
}
::view-transition-new(*),
::view-transition-old(*) {
height: 100%;
}
.tab::before {
view-transition-name: tab-background;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
const tabs = document.querySelectorAll(".tab")
tabs.forEach((tab) => {
tab.addEventListener("click", () => {
document.startViewTransition(() => {
document.querySelector(".tab.active").classList.remove("active")
tab.classList.add("active")
})
})
})
})
</script>
<div class="tabs">
<button class="tab active" style="view-transition-name: tab-1">Home</button>
<button class="tab" style="view-transition-name: tab-2">Interactions</button>
<button class="tab" style="view-transition-name: tab-3">Resources</button>
<button class="tab" style="view-transition-name: tab-4">Docs</button>
</div>