Анимированные иконки для Тап Бара на чистом HTML и CSS

Погрузитесь в минимализм и функциональность с иконками для Тап Бара, созданными на чистом HTML и CSS.

Этот стильный и интерактивный дизайн подходит для любых проектов, от мобильных приложений до веб-интерфейсов.

Красивые анимации, которые срабатывают при наведении, делают интерфейс живым и удобным. Все реализовано без использования JS, что обеспечивает легкость и простоту интеграции в ваш проект.

Адаптивность и лаконичность кода делают этот подход идеальным для современных разработчиков.

See the Pen Iconic Tab Bar - Pure CSS by Josetxu (@josetxu) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <nav class="menu">
 
 <input type="radio" name="nav-item" id="m-home" checked><label for="m-home">Home</label>
 <input type="radio" name="nav-item" id="m-search"><label for="m-search">Search</label>
 <input type="radio" name="nav-item" id="m-notification"><label for="m-notification">Notification</label>
 <input type="radio" name="nav-item" id="m-favorites"><label for="m-favorites">Favorites</label>
 <input type="radio" name="nav-item" id="m-profile"><label for="m-profile">Profile</label>
 
 <div class="selector"></div>
</nav>

        CSS
 
  
  Показать код CSS
  
         
:root {
 --icon: #b0bfd8;
}
 
body {
 width: 100%;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
 margin: 0;
 background-color: #e3efe8;
 background-image: linear-gradient(315deg, #e3efe8 0%, #96a7cf 74%);
}
 
 
nav.menu {
 display: flex;
 justify-content: space-between;
 position: relative;
 height: 150px;
 padding: 0 29px 10px;
 background: #fff0;
 align-items: flex-end;
 width: 600px;
}
 
nav.menu:before {
 content: "";
 width: 100%;
 height: 150px;
 background: #181818;
 position: absolute;
 left: 0;
 bottom: 0;
 border-radius: 20px;
 z-index: -1;
 box-shadow: 1px 1px 2px 0px #fff;
}
 
input { display: none; }
 
label {
 text-decoration: none;
 font-family: sans-serif;
 text-transform: uppercase;
 font-size: 14px;
 min-width: 100px;
 height: 100px;
 margin: 10px 10px 20px;
 text-align: center;
 display: inline-grid;
 align-items: end;
 color: #b0bfd8;
 position: relative;
 transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
 cursor: pointer;
}
 
label:hover {
 color: #fff;
 text-shadow: 0 0 5px #fff, 0 0 10px #fff;
}
 
input:checked + label {
 color: #fff;
 height: 130px;
}
 
.selector {
 --hole: #2196f3;
 background: 
 radial-gradient(circle at 50% 50%, #fff8 30px, #fff0 45px, #fff 50px, #fff0 50px 100%), 
 radial-gradient(circle at 50% 50%, var(--hole) 0 45px, #fff0 50px 100%),
 radial-gradient(circle at 50% 75px, #181818 0 70px, #fff0 71px 100%);
 width: 95px;
 height: 95px;
 position: absolute;
 bottom: 47px;
 left: 0;
 z-index: -1;
 transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
 border: 19px solid #181818;
 border-radius: 100%;
}
 
#m-home:checked ~ .selector {
 left: 23px;
}
 
#m-search:checked ~ .selector {
 left: 143px;
 filter: hue-rotate(535deg);
}
 
#m-notification:checked ~ .selector {
 left: 263px;
 filter: hue-rotate(950deg);
}
 
#m-favorites:checked ~ .selector {
 left: 383px;
 filter: hue-rotate(1580deg);
}
 
#m-profile:checked ~ .selector {
 left: 502px;
 filter: hue-rotate(1850deg);
}
 
.selector:after {
 content: "";
 position: absolute;
 bottom: -80px;
 width: 80px;
 height: 10px;
 background: #181818;
 left: calc(50% - 40px);
 border-radius: 5px 5px 15px 15px;
}
 
input:checked ~ .selector:after {
 box-shadow: 0 -17px 35px 8px var(--hole);
}
 
 
 
 
 
 
 
/*** ICONS ***/
label:before,
label:after {
 content: "";
 position: absolute;
 box-sizing: border-box;
 transition: all 0.5s ease 0s;
}
 
label:hover:before,
label:hover:after {
 filter: brightness(1.5) drop-shadow(0px 0px 4px #fff);
 transition: all 0.5s ease 0s;
}
 
input:checked + label:before, 
input:checked + label:after {
 filter: brightness(1.5) drop-shadow(0px 0px 2px var(--sel));
 transition: all 0.5s ease 0s;
}
 
 
label[for=m-home]:before {
 width: 40px;
 height: 40px;
 left: 30px;
 top: 30px;
 transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
 border-radius: 2px;
 background: 
 conic-gradient(from 90deg at 65% 60%, var(--icon) 0 25%, #fff0 0 100%),
 conic-gradient(from 180deg at 35% 60%, var(--icon) 0 25%, #fff0 0 100%),
 conic-gradient(from 135deg at 50% 0%, var(--icon) 0 25%, #fff0 0 100%);
 background-repeat: no-repeat;
 background-size: 100% 100%, 100% 100%, 100% 27px;
}
 
label[for=m-home]:after {
 width: 40px;
 height: 40px;
 left: 30px;
 top: 24px;
 border: 6px solid var(--icon);
 border-right-width: 0;
 border-bottom-width: 0;
 transform: rotate(45deg);
 border-radius: 5px;
 transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}
 
 
label[for=m-search]:before {
 width: 40px;
 height: 40px;
 left: 20px;
 top: 17px;
 border: 6px solid var(--icon);
 border-radius: 100%;
 transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}
 
label[for=m-search]:after {
 width: 22px;
 height: 9px;
 left: 60px;
 top: 50px;
 transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
 background: var(--icon);
 transform-origin: left top;
 transform: rotate(45deg);
 border-radius: 0 10px 10px 0;
}
 
 
label[for=m-notification]:before {
 width: 50px;
 height: 42px;
 left: 25px;
 top: 20px;
 z-index: 1;
 border-radius: 30px 30px 0 0;
 transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
 background: 
 linear-gradient(90deg, #fff0 0 6px, var(--icon) 0 calc(100% - 6px), #fff0 calc(100% - 6px) 100%), 
 conic-gradient(from 135deg at 50% 33%, var(--icon) 0 25%, #fff0 0 100%);
}
 
label[for=m-notification]:after {
 width: 10px;
 height: 57px;
 left: 45px;
 top: 14px;
 z-index: 0;
 transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
 background: radial-gradient(circle at 50% 6px, var(--icon) 3px, #fff0 4px 100%), #fff0;
 transform-origin: left top;
 border-bottom: 6px solid var(--icon);
 border-radius: 5px;
}
 
 
label[for=m-favorites]:before {
 width: 50px;
 height: 50px;
 left: 18px;
 top: -9px;
 transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
 background: 
 radial-gradient(circle at 16px 16px, var(--icon) 0 16px, #fff0 calc(16px + 1px) 100%), 
 radial-gradient(circle at 34px 34px, var(--icon) 0 16px, #fff0 calc(16px + 1px) 100%), 
 linear-gradient(45deg, var(--icon) 0 37px, #fff0 38px 100%);
 border-radius: 17px 22px 17px 4px;
 transform: rotate(-45deg);
 transform-origin: center right;
}
 
 
label[for=m-profile]:before {
 width: 50px;
 height: 54px;
 top: 16px;
 background: 
 radial-gradient(circle at 50% 15px, var(--icon) 0 12px, #fff0 13px 100%),
 radial-gradient(circle at 50% 100%, var(--icon) 0 22px, #fff0 23px 100%);
 left: 25px;
 border-radius: 8px;
}
 
 
input:checked + label {
 color: var(--sel);
 text-shadow: 0 0 5px var(--sel), 0 0 10px var(--sel);
} 
 
input:checked + label[for=m-home] {
 --sel: #39a1f4;
}
 
input:checked + label[for=m-search] {
 --sel:  #f48d4e;
}
 
input:checked + label[for=m-notification] {
 --sel:  #84a91c;
}
 
input:checked + label[for=m-favorites] {
 --sel:  #ff6275;
 height: 125px;
}
 
input:checked + label[for=m-profile] {
 --sel:  #9d74ff;
}
 
 
@media only screen and (orientation: portrait) {
 label { color: transparent !important; text-shadow: none !important;}
}