<!DOCTYPE html>
<html>
<head>
<link rel = 'stylesheet' href = 'index.css' type = 'text/css'>
<script src = 'index.js' defer></script>
</head>
<body>
<div class = 'tabs'>
<div class = 'tab'>
<input id = 'tab-one' name = 'tab' type = 'radio' checked/>
<label for = 'tab-one'>
<svg>
<use href = '#home-deactive' class = 'tab-deactive' />
<use href = '#home-active' class = 'tab-active' />
</svg>
</label>
</div>
<div class = 'tab'>
<input id = 'tab-two' name = 'tab' type = 'radio' />
<label for = 'tab-two'>
<svg>
<use href = '#message-deactive' class = 'tab-deactive' />
<use href = '#message-active' class = 'tab-active' />
</svg>
</label>
</div>
<div class = 'tab'>
<input id = 'tab-three' name = 'tab' type = 'radio' />
<label for = 'tab-three'>
<svg>
<use href = '#heart-deactive' class = 'tab-deactive' />
<use href = '#heart-active' class = 'tab-active' />
</svg>
</label>
</div>
<div class = 'tab'>
<input id = 'tab-four' name = 'tab' type = 'radio' />
<label for = 'tab-four'>
<svg>
<use href = '#alert-deactive' class = 'tab-deactive' />
<use href = '#alert-active' class = 'tab-active' />
</svg>
</label>
</div>
<div class = 'indicator'></div>
<div class = 'indicator-drop'></div>
</div>
<div class = 'reference'><a href = 'https://dribbble.com/shots/14777927-Tab-Bar-Animation-Glassmorphism-Effect'>Source of Inspiration</a></div>
<svg>
<symbol id = 'home-deactive' class="svg-icon-deactive" viewBox = '0 0 25 25'>
<path xmlns="http://www.w3.org/2000/svg" d="M 12 2.0996094 L 1 12 L 4 12 L 4 21 L 11 21 L 11 15 L 13 15 L 13 21 L 20 21 L 20 12 L 23 12 L 12 2.0996094 z M 12 4.7910156 L 18 10.191406 L 18 11 L 18 19 L 15 19 L 15 13 L 9 13 L 9 19 L 6 19 L 6 10.191406 L 12 4.7910156 z" stroke-width="0.05"/>
</symbol>
<symbol id = 'home-active' class="svg-icon-active" viewBox = '0 0 25 25' >
<path xmlns="http://www.w3.org/2000/svg" d="M 12 2 A 1 1 0 0 0 11.289062 2.296875 L 1.203125 11.097656 A 0.5 0.5 0 0 0 1 11.5 A 0.5 0.5 0 0 0 1.5 12 L 4 12 L 4 20 C 4 20.552 4.448 21 5 21 L 9 21 C 9.552 21 10 20.552 10 20 L 10 14 L 14 14 L 14 20 C 14 20.552 14.448 21 15 21 L 19 21 C 19.552 21 20 20.552 20 20 L 20 12 L 22.5 12 A 0.5 0.5 0 0 0 23 11.5 A 0.5 0.5 0 0 0 22.796875 11.097656 L 12.716797 2.3027344 A 1 1 0 0 0 12.710938 2.296875 A 1 1 0 0 0 12 2 z"/>
</symbol>
<symbol id = 'message-deactive' class="svg-icon-deactive" viewBox="0 0 53 53">
<path xmlns="http://www.w3.org/2000/svg" d="M 25 4.0625 C 12.414063 4.0625 2.0625 12.925781 2.0625 24 C 2.0625 30.425781 5.625 36.09375 11 39.71875 C 10.992188 39.933594 11 40.265625 10.71875 41.3125 C 10.371094 42.605469 9.683594 44.4375 8.25 46.46875 L 7.21875 47.90625 L 9 47.9375 C 15.175781 47.964844 18.753906 43.90625 19.3125 43.25 C 21.136719 43.65625 23.035156 43.9375 25 43.9375 C 37.582031 43.9375 47.9375 35.074219 47.9375 24 C 47.9375 12.925781 37.582031 4.0625 25 4.0625 Z M 25 5.9375 C 36.714844 5.9375 46.0625 14.089844 46.0625 24 C 46.0625 33.910156 36.714844 42.0625 25 42.0625 C 22.996094 42.0625 21.050781 41.820313 19.21875 41.375 L 18.65625 41.25 L 18.28125 41.71875 C 18.28125 41.71875 15.390625 44.976563 10.78125 45.75 C 11.613281 44.257813 12.246094 42.871094 12.53125 41.8125 C 12.929688 40.332031 12.9375 39.3125 12.9375 39.3125 L 12.9375 38.8125 L 12.5 38.53125 C 7.273438 35.21875 3.9375 29.941406 3.9375 24 C 3.9375 14.089844 13.28125 5.9375 25 5.9375 Z"/>
</symbol>
<symbol id = 'message-active' class="svg-icon-active" viewBox="0 0 53 53">
<path xmlns="http://www.w3.org/2000/svg" d="M 25 4 C 12.316406 4 2 12.972656 2 24 C 2 30.1875 5.335938 36.066406 10.949219 39.839844 C 10.816406 40.890625 10.285156 43.441406 8.183594 46.425781 L 7.078125 47.992188 L 9.054688 48 C 14.484375 48 18.15625 44.671875 19.363281 43.394531 C 21.195313 43.796875 23.089844 44 25 44 C 37.683594 44 48 35.027344 48 24 C 48 12.972656 37.683594 4 25 4 Z"/>
</symbol>
<symbol id = 'heart-deactive' class="svg-icon-deactive" viewBox="0 0 35 35">
<path xmlns="http://www.w3.org/2000/svg" d="M4 16 C1 12 2 6 7 4 12 2 15 6 16 8 17 6 21 2 26 4 31 6 31 12 28 16 25 20 16 28 16 28 16 28 7 20 4 16 Z" id="svg_1" class="selected" fill="none" stroke-opacity="1" stroke-width="2"/>
</symbol>
<symbol id = 'heart-active' class="svg-icon-active" viewBox="0 0 35 35">
<path xmlns="http://www.w3.org/2000/svg" d="M4 16 C1 12 2 6 7 4 12 2 15 6 16 8 17 6 21 2 26 4 31 6 31 12 28 16 25 20 16 28 16 28 16 28 7 20 4 16 Z" id="svg_1" class="selected" stroke-opacity="1" stroke-width="2" fill-opacity="1"/>
</symbol>
<symbol id = 'alert-deactive' class="svg-icon-deactive" viewBox="0 0 40 40">
<path xmlns="http://www.w3.org/2000/svg" d="M26.8,25H5.2c-0.8,0-1.5-0.4-1.9-1.1c-0.4-0.7-0.3-1.5,0.1-2.2L4.5,20c1.8-2.7,2.7-5.8,2.7-9c0-3.7,2.4-7.1,5.9-8.3 C13.7,1.6,14.8,1,16,1s2.3,0.6,2.9,1.7c3.5,1.2,5.9,4.6,5.9,8.3c0,3.2,0.9,6.3,2.7,9l1.1,1.7c0.4,0.7,0.5,1.5,0.1,2.2 C28.4,24.6,27.6,25,26.8,25z" id="svg_2" fill="none" fill-opacity="1" stroke-opacity="1" stroke-width="2" opacity="1"/>
<path xmlns="http://www.w3.org/2000/svg" d="M11.100000381469727,28.129943668842316 c0.5,2.299999952316284 2.5,4 4.900000095367432,4 s4.400000095367432,-1.7000000476837158 4.900000095367432,-4 H11.100000381469727 z" id="svg_3" class="selected" fill="none" stroke-width="2" opacity="1" stroke-opacity="1"/>
</symbol>
<symbol id = 'alert-active' class="svg-icon-active" viewBox="0 0 40 40">
<path xmlns="http://www.w3.org/2000/svg" d="M26.8,25H5.2c-0.8,0-1.5-0.4-1.9-1.1c-0.4-0.7-0.3-1.5,0.1-2.2L4.5,20c1.8-2.7,2.7-5.8,2.7-9c0-3.7,2.4-7.1,5.9-8.3 C13.7,1.6,14.8,1,16,1s2.3,0.6,2.9,1.7c3.5,1.2,5.9,4.6,5.9,8.3c0,3.2,0.9,6.3,2.7,9l1.1,1.7c0.4,0.7,0.5,1.5,0.1,2.2 C28.4,24.6,27.6,25,26.8,25z" id="svg_2" fill="#none" fill-opacity="1" stroke="#ffffff" stroke-opacity="1"/>
<path xmlns="http://www.w3.org/2000/svg" d="M11.100000381469727,27.56497174501419 c0.5,2.299999952316284 2.5,4 4.900000095367432,4 s4.400000095367432,-1.7000000476837158 4.900000095367432,-4 H11.100000381469727 z" id="svg_3" class="" fill-opacity="1" stroke-width="2" opacity="1"/>
</symbol>
</svg>
</body>
</html>:root {
--page-bg-one: #fe7630;
--page-bg-two: #ffc711;
--tabs-bg-one: rgba(255, 164, 59, 57%);
--tabs-bg-two: rgb(255, 251, 148, 67%);
--reference: rgb(133, 0, 167);
--reference-hover: rgb(103, 0, 129);
--white: #ffffff;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(
to bottom right,
var(--page-bg-one),
var(--page-bg-two)
);
width: 100vw;
height: 100vh;
}
.tabs {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
width: 300px;
height: 95px;
border-radius: 15px;
background-image: linear-gradient(
to bottom right,
var(--tabs-bg-one),
var(--tabs-bg-two)
);
box-shadow: -1.5px -1.5px 2px -2px var(--white),
5px 5px 30px rgb(0, 0, 0, 0.2);
border: 0.5px solid;
border-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3) transparent
rgba(255, 255, 255, 0.3);
}
.tab {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
label {
cursor: pointer;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
svg {
width: 40px;
position: relative;
}
.svg-icon-deactive {
fill: var(--white);
stroke: var(--white);
display: inline;
width: 10px;
height: 10px;
}
input,
use.tab-active {
display: none;
}
input:checked + label svg use.tab-active {
transform-origin: 50% 50%;
animation: fill-animation 0.9s ease 0.3s;
animation-fill-mode: forwards;
display: block;
fill: none;
}
label:hover {
animation: scale-animation 0.9s ease 0.2s;
animation-fill-mode: forwards;
}
.indicator {
position: absolute;
width: 22px;
height: 17px;
border-radius: 50%;
top: 78px;
transition: 0.3s ease-in-out;
border-radius: 50% 50% 0 0/100% 100% 0 0;
transform-origin: center 20px;
}
.indicator-animation {
animation: scale-indicator-animation 0.2s ease-out 0.3s;
}
.indicator::before {
content: "";
position: absolute;
border-right: 5px solid var(--indicator);
border-radius: 0% 35% 51% 0/0% 100% 78% 0;
width: 18px;
height: 16.5px;
left: -17.5px;
top: -2px;
transform: rotate(36deg);
}
.indicator::after {
content: "";
position: absolute;
border-left: 5px solid var(--indicator);
border-radius: 35% 0% 0% 51%/100% 0% 0% 78%;
width: 18px;
height: 16.5px;
left: 16.5px;
top: -2px;
transform: rotate(-36deg);
}
.indicator-drop {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--white);
transition: top 0.2s ease-in-out;
}
.reference {
position: absolute;
align-self: flex-end;
}
a {
outline: none;
text-decoration: none;
color: var(--reference);
}
a:hover {
color: var(--reference-hover);
}
@keyframes fill-animation {
from {
clip-path: circle(0% at 50% 100%);
}
to {
clip-path: circle(110% at bottom);
fill: var(--white);
}
}
@keyframes scale-animation {
from {
transform: scale(0.9);
}
to {
transform: scale(1.05);
}
}
@keyframes scale-indicator-animation {
from {
transform: scaleY(0.7) scaleX(1.3);
}
to {
transform: scaleY(1) scaleX(1);
}
}
const tabs = document.querySelectorAll(".tab");
const indicator = document.querySelector(".indicator");
const indicator_drop = document.querySelector(".indicator-drop");
tabs.forEach((el) => el.addEventListener("click", clickTab));
const active_tab = document.querySelector("input:checked + label");
indicator.style.left = `${active_tab.offsetLeft + 12}px`;
indicator.style.backgroundColor = "#e2921a";
indicator.style.setProperty("--indicator", "#e2921a");
indicator_drop.style.left = "31px";
indicator_drop.style.top = "75px";
indicator_drop.style.opacity = "0";
function clickTab() {
let active_tab = document.querySelector("input:checked + label");
indicator.style.left = `${active_tab.offsetLeft + 12}px`;
let active_tab_number = active_tab.getAttribute("for");
indicator.className = "indicator indicator-animation";
setTimeout(() => {
indicator_drop.style.top = "55px";
indicator_drop.style.left = `${active_tab.offsetLeft + 18}px`;
indicator_drop.style.opacity = "1";
}, 300);
setTimeout(() => {
indicator_drop.style.top = "75px";
indicator_drop.style.left = "31px";
indicator_drop.style.opacity = "0";
}, 500);
setTimeout(() => {
indicator.className = "indicator";
}, 500);
switch (active_tab_number) {
case "tab-one":
indicator.style.backgroundColor = "#e18e1c";
indicator.style.setProperty("--indicator", "#e18e1c");
break;
case "tab-two":
indicator.style.backgroundColor = "#e3911a";
indicator.style.setProperty("--indicator", "#e3911a");
break;
case "tab-three":
indicator.style.backgroundColor = "#e1921a";
indicator.style.setProperty("--indicator", "#e1921a");
break;
case "tab-four":
indicator.style.backgroundColor = "#e39519";
indicator.style.setProperty("--indicator", "#e39519");
break;
default:
indicator.style.backgroundColor = "#e18e1c";
indicator.style.setProperty("--indicator", "#e18e1c");
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.